在 javascript 函数中传递 ruby 集合答案

【问题标题】：Passing a ruby collection in a javascript function在 javascript 函数中传递 ruby 集合
【发布时间】：2023-03-31 00:29:02
【问题描述】：

我想将一个 ruby 集合传递给一个 javascript 数组以在我的日历插件中使用。我在 javascript 中有一个 events 数组，我想将我的 ruby 集合中每条记录的属性用于 javascript 数组。

我的 Javascript：

calendar =  $('#calendar').fullCalendar({
            header: {
                left: 'title',
                center: 'agendaDay,agendaWeek,month',
                right: 'prev,next today'
            },
            events: [{
                    title: 'Event One',
                    start: new Date(y, m, 1)
                 },
                  {
                    title: 'Event two',
                    start: new Date(y, m, 1)
                 }, ...]

所以对于events，我想在ruby 中遍历我的@rubyevents 集合，提取每条记录的属性并在该javascript 对象中使用它们。像这样的：

      events: function() {
         events = []
         <% @rubyevents.each do |r| %>
           e  = new Event();
           e[title] =  function() { return <%= r.name %> }...
           e[start] = function()  { return <%= r.date %> }
 
            events.push(e)
         <% end %>

         return events
        }

然后将此数组 events 作为带有 ruby 值的 javascript 返回。有没有办法做到这一点？

【问题讨论】：

标签： javascript jquery ruby-on-rails ruby

【解决方案1】：

//Controller
...
@rubyevents = RubyEvent.all
...


//View
..
...
<%= javascript_tag do -%>
  var allEvents = '<%= @rubyevents.to_json.html_safe %>'
  
  events: function() {
   return JSON.parse(allEvents);
  }
<% end -%>

【讨论】：

日期属性会这样解析吗？ json可以处理日期对象吗？
日期字符串不会被转换为Date javascript 对象。您需要手动解析/创建日期。

【解决方案2】：

我有 2 条建议：

使用 gem gon: Gon 可以直接将 ruby 数据复制到 JS 中。更多信息可以在它的 github 页面上找到：https://github.com/gazay/gon

# in rails controller
gon.events = [{name: 'a'}, {name: 'b'}]

// in js
console.log(gon.events)
// => [{name: 'a'}, {name: 'b'}]

将 ruby 变量渲染为 JSON 字符串并将其放入 data-* 这实际上与 gon 的方法相同，但没有 gem 帮助。

<div id="ruby-variables" data-variables="<%= [{name: 'a'}, {name: 'b'}].to_json %>">
</div>

const json = JSON.parse(document.getElementById("ruby-variables").dataset.variables)
console.log(json)
// => [{"name": "a"}, {"name": "b"}]

其实将ruby数据复制到JS的原理是先在DOM中渲染数据，再从JS端解析。 gon 也是一样的思路

【讨论】：