将数据从控制器传递到Rails中的资产JS

Question

我正在使用Rails 5.我尝试将控制器(从SQL查询中获取(的数据传递到Assests中的JS文件。我从控制器中运行查询

@sample = Sample.all  

我需要在Fullcalendar事件中显示数据。
资产/JS文件

$('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'agendaDay,listWeek,agendaWeek,month'
            },
            editable: true,
            eventLimit: true, // allow "more" link when too many events
            defaultView: 'listWeek',
            navLinks: true,
            events: [
                <% @sample.each do |sample| %>
                {
                    title: '<%= sample.title %>',
                    start:  TODAY + 'T09:00:00',
                    description: '<%= sample.description %>'
                }
                <% end %>  

它没有在FullCalendar中显示结果。如何将其从控制器传递到资产/JS
非常感谢您的快速响应

Answer 1

一种简单的方法是将部分放置在 layouts/_variables.html.erb 中，然后将其置于应用程序布局中的<script>标签中。

例如：

<script>    
  _app.samples = [
  <% @sample.each do |sample| %>
       {
         title: '<%= sample.title %>',
         start:  TODAY + 'T09:00:00',
         description: '<%= sample.description %>'
      }
  <% end %>  
  ];
</script>

然后在原始日历内，只需直接使用生成的JavaScript：

  $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'agendaDay,listWeek,agendaWeek,month'
        },
        editable: true,
        eventLimit: true, // allow "more" link when too many events
        defaultView: 'listWeek',
        navLinks: true,
        events: _app.samples,

in layouts/application.html.erb

</script>
  <%= render partial: "layouts/_variables" %>
  <%= csrf_meta_tags %>
  ...

它的好处是，您不需要使用Rails代码污染JavaScript资产，并且在每个页面上更新数据，而无需向服务器进行额外的往返。

缺点是您需要单独考虑AJAX请求(尽管这是一个完全不同的问题(，并且应该注意将这些变量放在应用程序特定的结构中，以免用随机变量污染您的全球空间。/p>

Answer 2

您可以将GON GEM用于此问题，如以下示例：

在控制器文件中：

gon.user_id = @user.id

在JS文件中：

console.log(gon.user_id(;

" gon gem - 在JS中获取导轨变量。如果您需要将一些数据发送到JS文件，并且您不想在视图和解析中以很长的路要执行此操作，请使用此力量！"

有关更多信息：

https://github.com/gazay/gon/gon