Создание jQuery работает с Turbolinks

Question

У меня есть приложение Rails 4, которое использует Turbolinks. Я понимаю, что Turbolinks разбивает код jQuery, поскольку Turbolinks не загружает новую страницу, а получает только новые элементы.

Таким образом, переход на новую страницу может не вызвать .ready, хотя он всегда вызывает .page:load, и поэтому новый код jQuery не будет инициализироваться.

У меня много кода jQuery, поэтому я не хочу изменять код jQuery для совместимости с Turbolinks.

Можно ли добавить javascript-код в application.js, который перезаписывает .ready событие, чтобы включить page:load? Как я должен это делать?

Answer 1

Вместо того, чтобы ждать $(document).ready огня для JQuery, просто использовать page:load вместо:

$(document).on 'page:load' -> 
    <your code> 

В качестве альтернативы, вы можете настроить jquery.turbolinks перл: https://github.com/kossnocorp/jquery.turbolinks

Answer 2

я должен был использовать page:change событие:

ЯШ:

$(document).on('page:change', function() { 
    <code here> 
}); 

кофе сценарий:

$(document).on 'page:change', -> 
    <code here> 

Answer 3

С turbolinks 5.0.0, события изменили на turbolinks:load. См. full list of turbolinks events.

Документация recommends following code:

document.addEventListener("turbolinks:load", function() { 
    // ... 
}) 

jquery.turbolinks вилка расположена на https://github.com/dalpo/jquery.turbolinks уже отражает эти изменения и позволяет бесшовной дроп-ин из turbolinks. Тем не менее, я бы пошел на событие turbolinks:load, чтобы иметь полный контроль и не требовать другую библиотеку.

Answer 4

С TurboLinks 5/Rails 5 ... Я бы рекомендовал создавать экземпляры DataTables, как это.

Это предотвратит показ пейджинга заголовка и нижнего колонтитула несколько раз, когда используется кнопка «Назад».

$(document).on 'turbolinks:load', -> 
    tableElementIds = [ 
    '### TABLE ID HERE ###' 
    ] 
    i = 0 
    while i < tableElementIds.length 
    tableElementId = tableElementIds[i] 
    if $.isEmptyObject($.find(tableElementId)) 
     i++ 
     continue 
    table = undefined 
    if $.fn.DataTable.isDataTable(tableElementId) 
     table = $(tableElementId).DataTable() 
    else 
     table = $(tableElementId).DataTable(### OPTIONS HERE ###) 

    document.addEventListener 'turbolinks:before-cache', -> 
     table.destroy() 
     return 

    i++ 

    return