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

问题描述

我有一个 javascript 日历 (FullCalendar v5) 在我的 Rails 6 应用程序中启动并运行，除了我的 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”。

解决方法

var calendar = new Calendar .. 已经定义（在 calendar.js 中）并且它是 Calendar。 因此，如果您在 var calendar = document.getElementById('calendar'); 中重新定义 destroy.js.erb，变量 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 ，这很好，因为我们很快就会失败。