时间戳

首页 > 解决方案 > 如何在 Rails 6 应用程序中将变量传递给 javascript

javascript - 如何在 Rails 6 应用程序中将变量传递给 javascript

问题描述

我有一个使用完整日历的 rails 6 应用程序。我已设置日历并正常工作。

要完成日历集成，我唯一需要做的就是将 @user.id 添加到 json 提要的 url 中，以便将数据添加到日历中。

这是我的代码：

javascript/fullcalendar/fullcalendar.js

import { Calendar } from "@fullcalendar/core";
import dayGridPlugin from "@fullcalendar/daygrid";

document.addEventListener('turbolinks:load', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new Calendar(calendarEl, {
    
    plugins: [ dayGridPlugin ],

    eventSources: [
      {        
        url: "/users/<%= @user.id %>/jobs.json",
      }
    ]

  });

  calendar.render();

});

如果我替换<%= @user.id %>为3然后日历从 json.jbuilder 文件中提取数据并且日历工作。

我如何传递<%= @user.id %>到日历？

标签： javascriptruby-on-railsfullcalendarwebpacker

解决方案

在 Rails 应用程序中，通过数据属性传递属性是很常见的模式。

在您的视图模板中，您将插入用户 ID：

<div id="calendar" data-user-id="<%= @user.id %>">
</div>

在您的 JavaScript 中，您将通过以下方式读取用户 ID dataset：

var calendarEl = document.getElementById('calendar');
var userId = calendarEl.dataset.userId;

推荐阅读