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();

当我收到以下错误时：

未捕获的类型错误：calendar.getEventById 不是函数

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

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

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

日历.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();
});

destroy.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)添加到destroy.js.erb中看看“日历”指的是。我得到的是 index.html.erb 中的<div id="calendar"></div> 元素。所以

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

"calendar" 当前指的是 div 而不是 calendar.js 中的日历对象。我还尝试在 calendar.js 中将 calendar 重命名为 fullcalendar 以区分 div 和日历，但现在我收到“未捕获的 ReferenceError: fullcalendar is not defined”。

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 ，这很好，因为我们很快就会失败。