如何使用 turbolinks 加载 javascript 依赖项

Question

在 Rails 应用程序中，我使用的是 turbolinks 和 jquery-turbolinks。我有一些大的 javascript 依赖项，比如 dataTables。首先，我在 application.js 上加载所有这些依赖项，但最后，我在预编译后的 1Mo 上有大文件，所以我只想在需要时加载依赖项。

我创建了一个名为 custom-datables.coffe 的文件，其中包含以下内容：

#= require dataTables/jquery.dataTables
#= require datatables

$(document).ready ->
  console.log $('.data-table').dataTable

我是这样包含的：

- content_for :javascript do
  = javascript_include_tag 'custom-datatables'

我在应用程序布局结束时生成了 javascript。

当我刷新页面时它可以工作，但是当我使用 turbolinks 转到此页面时，我可以看到 $('.data-table').dataTable 未定义。当我在 firefox 的控制台中输入$('.data-table').dataTable 时，函数就被定义了。 $(document).ready 似乎在数据表完全加载之前触发。

有办法解决吗？加载大依赖项是最佳做法吗？

Answer 1

当使用turbolinks 时，您应该使用page:change 事件，而不是文档就绪。

所以在你的情况下：

$(window).bind 'page:change', () ->
  console.log $('.data-table').dataTable

我通常更喜欢一个大的 application.js 文件，因为第一次加载后它会缓存在您的客户端浏览器中。同样在生产中，它会被缩小和压缩。