Migrando jQuery para uso em um aplicativo Turbolinks

Atualizar para uma versão rails com Turbolinks pode causar problemas com o código jQuery existente. O principal problema é com o jQuery que é chamado na função ready ().

Tome este jQuery como exemplo.

$(document).ready(function(){
  $("[data-toggle='autocomplete']").each(function(){
    $(this).prop("autocomplete", "off");
  });
});

No contexto de um aplicativo Turbolinks, isso só será acionado no carregamento ou atualização da página inicial (ou seja, não após quaisquer cliques subsequentes em links controlados por Turbolink). Uma maneira de contornar isso é envolver o código a ser executado em uma função e chamá-lo de um eventListener vinculado ao evento page: load, além da função ready ().

function toggleAutoComplete(){
  $("[data-toggle='autocomplete']").each(function(){
    $(this).prop("autocomplete", "off");
  });
 }
 $(document).ready(function(){ toggleAutoComplete() });
 document.addEventListener('page:load', function(){ toggleAutoComplete() });

EDIT: @glaszig aponta que você pode usar

jQuery(document).on("ready page:change", function() { toggleAutoComplete() })

para tornar isso um pouco mais conciso e manter seu jQuery como uma função anônima, se você escolher. Também page: change fará com que o jQuery seja executado alguns milissegundos antes do page: load.

Isso irá chamar a função toggleAutoComplete () quando a página for carregada inicialmente (via ready ()) e quando o evento page: load (ou page: change se você usá-lo) for acionado no final da Sequência de Eventos Turbolinks .

Há muitas coisas que você pode fazer para escrever seu jQuery para torná-lo compatível com Turblolinks agora (a maioria deles são as melhores práticas de javascript de qualquer maneira). Existem muitos recursos bons por aí sobre como fazer isso no contexto Turbolinks , no entanto, um fácil de manter em mente é usar eventos (EDIT: delegado ) on () em vez de funções de evento explícitas (por exemplo, clicar, alterar, enviar , etc.) quando possível. Isso garante que as funções sejam anexadas a esses objetos DOM, independentemente se o objeto já existia quando a função foi chamada inicialmente.