您如何在视图中混合 JS 和 Ruby 代码以供以后 JS 使用？答案

【问题标题】：How do you mix JS and Ruby code in a view for later JS usage?您如何在视图中混合 JS 和 Ruby 代码以供以后 JS 使用？
【发布时间】：2012-03-01 01:03:29
【问题描述】：

我正在使用 jquery UI DatePicker 小部件来显示日历。日历中的每一天都由 Result 对象的集合表示，这些对象属于一个 Objective 模型。如果一天的所有结果都成功，我将在日历单元格上设置一个类，使其变为绿色。如果其中至少有一个失败了，我会把它变成红色的。如果不存在结果，我将其设为灰色。现在，我做这样的事情：

<%= start_day .. end_day do |day| %>
   <div class="hidethis" id="<%= [day.year,day.month,day.year].join(",") %>" value="<%= objective.result_status_for_day(day)%>"/>
<% end %>

我将数据存储在隐藏的 div 中，稍后，当我初始化日历时，在 beforeShowDay 中，我将通过 div id 找到与我相关的，并设置负责着色的类细胞。有没有其他方法可以做到这一点，或者这是其他人在实践中使用的东西？

【问题讨论】：

标签： javascript ruby-on-rails ruby coffeescript

【解决方案1】：

我不会使用 id 和 value 属性。我认为 div 标签甚至不支持 value 属性。相反，我会使用数据属性，它允许您编写有效的 HTML 标记，同时在您的页面中嵌入数据。

<%= start_day .. end_day do |day| %>
   <div class="hidethis" data-date="<%= [day.year,day.month,day.year].join(",") %>" data-value="<%= objective.result_status_for_day(day)%>"></div>
<% end %>

var value = $('div').attr('data-value');

【讨论】：

【解决方案2】：

使用 HTML 进行数据存储似乎有点迂回。为什么不将您的数据存储为 JavaScript 数据？像这样的：

<script type="text/javascript">
    window.app = window.app || { };
    window.app.objective_data = <%= @raw_objective_data.to_json.html_safe %>;
</script>

然后在 Ruby 中设置您的原始数据，将其保留在 @raw_objective_data 中，然后在初始化过程中将其加载到您的客户端模型中。或者您可以通过简单的 AJAX 调用将数据直接加载到您的 (Java|Coffee)Script 中。

您还需要避免'</script>' 和@raw_objective_data.to_json 中的类似内容，您可以了解over here。

【讨论】：