在.js.erb

Question

我有一个书籍索引页面，显示所有使用familiair结构的书籍：

@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返回错误undefined method：NilClass , so the @ books is not available in the。js.erb`文件。如何在JavaScript中提供这些书籍？是否有更好的选择在图表中使用这些数据？

Answer 1

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

1. 从AJAX文件
中通过chart.js从服务器加载数据
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>

draw_chart chart.js函数加载数据

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

您还可以从erb删除chart.js扩展名，而不需要使用erb编译javascripts。

我希望这有点帮助。