Rails 6 - 如何在 js.erb 文件中引用 javascript 文件变量？

Question

我的 Rails 6 应用程序中有一个 javascript 日历（FullCalendar v5）和运行，除了我的 js.erb 文件外，一切正常。例如，当删除一个日历事件时，该事件被正确地从数据库中删除并且 Rails 正确地进入了我的 destroy.js.erb 文件。但是我的 js.erb 文件无法识别代码为

的日历

var calendar = document.getElementById('calendar');
var event = calendar.getEventById(<%= @calendar_event.id %>);
event.remove();

因为我收到以下错误：

Uncaught TypeError: calendar.getEventById is not a function

(这里的getEventById应该是正确的https://fullcalendar.io/docs/Calendar-getEventById)

如何在destroy.js.erb中正确引用calendar.js中的日历，以便在js.erb文件中使用FullCalendar库相关的方法？

这是我当前与此错误相关的代码：

calendar.js

import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';

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

    var calendar = new Calendar(calendarEl, {
        plugins: [dayGridPlugin, interactionPlugin],
        selectable: true,
        editable: true,

        events: "/calendar_events.json",

    eventClick: function (info) {
        $.getScript(info.event.extendedProps.edit_url, function () { });
    },

    });

    calendar.render();
});

摧毁。js.erb:

var calendar = document.getElementById('calendar');
var event = calendar.getEventById(<%= @calendar_event.id %>);
event.remove();

index.html.erb

<div id="calendar"></div>

我完全是 Javascript 的初学者，并且在这方面停留了一段时间，所以任何帮助将不胜感激！ :)

到目前为止我尝试了什么：我按照建议从destroy.js.erb文件中删除了var calendar = document.getElementById('calendar');，但不幸的是错误没有解决，所以添加了console.log(calendar)来销毁.js.erb 查看“日历”指的是什么。我得到的是来自 index.html.erb 的 <div id="calendar"></div> 元素。所以

//destroy.js.erb
var event = calendar.getEventById(<%= @calendar_event.id %>);
event.remove();

“日历”目前指的是 div 而不是 calendar.js 中的日历对象。我还尝试在 calendar.js 中将 calendar 重命名为 fullcalendar 以区分 div 和日历，但现在我收到“未捕获的引用错误：未定义完整日历”。

Answer 1

var calendar = new Calendar .. 已经定义（在 calendar.js 中）并且是 Calendar。因此，如果您在 destroy.js.erb 中重新定义 var calendar = document.getElementById('calendar');，则变量 calendar 不再是 Calendar。

所以 1. 确保 calendar.js 已导入。

和 2. 删除重新定义日历

// destroy.js.erb
var event = calendar.getEventById(<%= @calendar_event.id %>);
event.remove();

注意日历最好定义为常量

const calendar = new Calendar(calendarEl, { ...`

然后任何 .js.erb 文件尝试重新定义日历将显示错误 redeclaration 这很好，因为我们很快就会失败。

Rails 6 - 如何在 js.erb 文件中引用 javascript 文件变量？

Rails 6 - How to refer to javascript file variable in js.erb file?

javascript

ruby-on-rails

fullcalendar

erb

fullcalendar-5