我正在使用 Google 可视化在 View 内嵌套的脚本标记中构建图表表。这在直接获取页面时效果很好，但在通过 link_to 帮助器运行时，javascript 不起作用。
我相信这与 turbolinks 有关，但是如下所示用 page:load 包装 JavaScript 并没有什么不同。我已经确认关闭 turbolinks 确实解决了这个问题，但是没有它整个应用程序会明显变慢。
<script type="text/javascript" charset="UTF-8">
function resultstable () {
google.load('visualization', '1', {packages:['table']});
google.setOnLoadCallback(drawTable);
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', '');
data.addColumn('number', 'Lot #');
data.addColumn('string', 'Client');
data.addColumn('boolean', 'Commercial');
data.addColumn('string', 'Site');
data.addColumn('string', 'Biological Classification');
data.addColumn('string', 'Actions');
data.addRows([
<% @lots.each do |lot| %>
[
'<%= check_box_tag "lot_ids[]", lot.id %>',
<%= lot.id.to_s %>,
'<%= link_to Client.find(lot.client_id).org.to_s.humanize, client_path(lot.client_id) %>',
<%= lot.commercial %>,
'<%= lot.site %>',
'<%= lot.phylum.to_s + " " + lot.l_class.to_s + " " + lot.genus.to_s + " " + lot.species.to_s %>',
'<%= link_to edit_lot_path(lot) do %><i class="icon-edit"></i><% end %> <%= link_to lot_path(lot) do %><i class="icon-time"></i><% end %>'
],
<% end %>
]);
function rm_google_classes() {
var className = 'google-visualization-table-table';
$('.'+className).removeClass(className);
var className = 'google-visualization-table-th';
$('.'+className).removeClass(className);
var className = 'google-visualization-table-tr-head';
$('.'+className).removeClass(className);
var className = 'google-visualization-table-tr-odd';
$('.'+className).removeClass(className);
var className = 'google-visualization-table-tr-even';
$('.'+className).removeClass(className);
var className = 'google-visualization-table-td';
$('.'+className).removeClass(className);
var className = 'google-visualization-table-td-number';
$('.'+className).removeClass(className);
var className = 'google-visualization-table-td-bool';
$('.'+className).removeClass(className);
$("#gtable-results table").addClass("table table-condensed");
};
var table = new google.visualization.Table(document.getElementById('gtable-results'));
table.draw(data, {allowHtml: true});
rm_google_classes();
google.visualization.events.addListener(table , 'sort',
function(event) {
rm_google_classes();
});
};
}
$(document).ready(resultstable());
$(document).on('page:load', resultstable());
</script>
最佳答案
Visualization API 对其加载方式非常讲究，因此当您在另一个类似的函数中调用 google.load 时，您必须稍微更改加载结构。这:
google.load('visualization', '1', {packages:['table']});
google.setOnLoadCallback(drawTable);
必须改成这样:
google.load('visualization', '1', {packages:['table'], callback: drawTable});
此外，您的事件处理程序未正确完成:
$(document).ready(resultstable());
$(document).on('page:load', resultstable());
正在调用 resultstable函数并将函数的返回值(在您的情况下为 null)传递给就绪事件处理程序，这什么也不做。如果您希望在文档准备就绪时调用 resultstable 函数，则需要删除 ()从函数名的末尾开始:
$(document).ready(resultstable);
$(document).on('page:load', resultstable);
另外，我浏览了 turbolinks 的东西，看起来你想在这里采取不同的方法。 Google 加载器动态地向 <head> 添加一个脚本标签。页面的一部分，它不会被 turbolinks 清除，因此您不想在加载新页面时继续调用加载程序。试试这个:
function drawTable () {
// table drawing code
}
function init () {
$(document).on('page:load', drawTable);
drawTable();
}
google.load('visualization', '1', {packages:['table'], callback: init});
这将确保加载可视化 API，并且 drawTable每次加载页面时都会调用该函数。
关于javascript - Ruby-on-Rails JavaScript 未在 link_to 上加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18801062/