在.js.erb中使用Rails数据收集

Question

我有一个图书索引页面，其中显示了使用家族结构的所有图书：

@books.each do |book|
 ....
end

我要在同一页面上使用相同的@books数据显示Google图表。 该图表由div触发：

<div id="chart_div"></div>

还有一个chart.js.erb文件：

if ($("#chart_div").length > 0){
  google.load('visualization', '1.1', {packages: ['corechart']});

  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Title', 'Author'],
      <%- @books.each do |book| %>
        <%= "['#{book.title}','#{book.author}']," %>
      <%- end %>
    ]);

    var chart = new     google.visualization.AreaChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
}

但这会返回nil：NilClass的错误undefined method each , so the @books is not available in the .js.erb`文件中is not available in the 。 如何在JavaScript中提供书籍？ 在图表中是否有更好的选择来使用此数据？

Answer 1

JavaScript不是在控制器动作的上下文中编译的，因此您不能使用在控制器中分配的实例变量。 您可能有两个选择：

1. 通过chart.js文件从服务器通过AJAX加载数据
2. 在页面渲染期间将@book数据存储到您的DOM中，例如 作为JSON ，然后从chart.js读取

第二种选择更容易解释：

将类似这样的代码添加到购物车中的页面：

<script id="chart_data" type="application/json" charset="uff-8>
  <%= raw @books.map { |book| [h(book.title), h(book.author)] }.unshift(['Title', 'Author']).to_json %>
</script>

并在chart.js的draw_chart函数中使用

var data_array = JSON.parse($("#chart_data").html());
var data = google.visualization.arrayToDataTable(data_array);

您也可以从chart.js删除erb扩展名，而无需使用erb编译javascript。

我希望这个能有一点帮助。