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文件，因为首次加载后它会缓存在客户端浏览器中。同样在生产中，它将被缩小和压缩。

如何使用turbolinks加载javascript依赖项

1 个答案: