Как загрузить зависимости 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 в конце моего макета приложения.

Это работает, когда я обновляю страницу, но когда я захожу на эту страницу, используя турболинки, я вижу, чем $('.data-table').dataTable не определено Когда я печатаю $('.data-table').dataTable в консоли Firefox функция определена. $(document).ready кажется, сработал до полной загрузки данных.

Есть ли способ это исправить? Это лучшая практика для загрузки больших зависимостей?

Answer 1

При использовании турболинков вы должны использовать page:change событие, а не документ готов.

Итак, в вашем случае:

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

Я обычно предпочитаю один большой файл application.js, потому что после первой загрузки он будет кэшироваться в браузере ваших клиентов. Также в производстве оно будет минимизировано и сжато.