通过 <%= content_tag %> 从 Rails 视图向 Javascript 传递数据的问题答案

【问题标题】：Problems with passing data to Javascript from a Rails view via <%= content_tag %>通过 <%= content_tag %> 从 Rails 视图向 Javascript 传递数据的问题
【发布时间】：2021-12-04 01:21:50
【问题描述】：

我对 Rails 和一般编程比较陌生，并且在将数据从 Rails 视图中的 <%= content_tag %> 传递到 Javascript 函数时遇到问题（在这种情况下，特别是使用 fullcalendar） .检查渲染页面的 HTML 源代码显示数据正确地以结果 div 结尾，但其中的数据似乎没有进入应该引用它的 Javascript 函数中。

这个问题可能是一些非常基本的问题，因为我以前没有使用 Javascript 的经验，但是大量的谷歌搜索并没有给我任何解决方案。

视图包含以下content_tag：

<%= content_tag :div, "", class: "calendar_data", data: {start_date: '2021-10-12', end_date: '2021-10-19'} do %>
<% end %>

（一旦它起作用，我将用变量替换这些日期。）

我的application.js的相关部分包含以下代码：

function loadCalendar() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new Calendar(calendarEl, {
    plugins: [timeGridPlugin],
    initialView: 'timeGrid',
    visibleRange: {
      start: $('.calendar_data').data('start_date'),
      end: $('.calendar_data').data('end_date')
    }
  });

  calendar.render();
};

将$('.calendar_data').data('start_date') 和end_date 位替换为字符串形式的纯日期（例如'2021-10-12'）会产生预期的行为，这就是为什么看起来正在发生的事情是那些$. ... 位未能返回他们应该寻找的数据。据我了解，该数据应该可用，因为渲染页面的 HTML 包含具有预期内容的 div：

<div class="calendar_data" data-start-date="2021-10-12" data-end-date="2021-10-19">
</div>

（为了完整起见，是的，我已经安装了 jquery 并且 application.js 包括 import $ from 'jquery'。）

我在这里做错了什么？这个过程的什么基本原则我没能正确地用谷歌搜索？

【问题讨论】：

标签： javascript jquery ruby-on-rails

【解决方案1】：

我通过将 calendar_data 设为 id 而不是 content_tag 中的类来解决此问题，并利用 Javascript 的 getElementById 和 dataset 功能：

生成的application.js 代码是这样的：

function loadCalendar() {
  var calendarEl = document.getElementById('calendar');
  var calendarData = document.getElementById('calendar_data');
  var calendar = new Calendar(calendarEl, {
    plugins: [timeGridPlugin],
    initialView: 'timeGrid',
    visibleRange: {
      start: calendarData.dataset.startDate,
      end: calendarData.dataset.endDate
    }
  });

  calendar.render();
};

【讨论】：