在javascript函数中传递ruby集合

Question

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

我的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作为javascript与ruby值。有办法做到这一点吗?

Answer 1

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

//View
..
...
<%= javascript_tag do -%>
var allEvents = '<%= @rubyevents.to_json.html_safe %>'

events: function() {
return JSON.parse(allEvents);
}
<% end -%>

Answer 2

我有两个建议:

1. 使用gemgon: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'}]

2. 将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也使用同样的想法