如何在 Rails 6 应用程序中将变量传递给 javascript
How to pass a variable to javascript in Rails 6 app
我有一个使用完整日历的 rails 6 应用程序。我已设置日历并正常工作。
要完成日历集成,我唯一需要做的就是将 @user.id 添加到 url 以便 json 提要将数据添加到日历。
这是我的代码:
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 %>
传递给日历?
在 Rails 应用程序中通过 data attributes 传递属性是一种很常见的模式。
在您的视图模板中,您将插入用户 ID:
<div id="calendar" data-user-id="<%= @user.id %>">
</div>
并且在您的 JavaScript 中,您将通过 dataset
:
读取用户 ID
var calendarEl = document.getElementById('calendar');
var userId = calendarEl.dataset.userId;
我有一个使用完整日历的 rails 6 应用程序。我已设置日历并正常工作。
要完成日历集成,我唯一需要做的就是将 @user.id 添加到 url 以便 json 提要将数据添加到日历。
这是我的代码:
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 %>
传递给日历?
在 Rails 应用程序中通过 data attributes 传递属性是一种很常见的模式。
在您的视图模板中,您将插入用户 ID:
<div id="calendar" data-user-id="<%= @user.id %>">
</div>
并且在您的 JavaScript 中,您将通过 dataset
:
var calendarEl = document.getElementById('calendar');
var userId = calendarEl.dataset.userId;