Rails 4: como usar $ (document) .ready () com turbo-links

Eu encontrei um problema no meu aplicativo Rails 4 enquanto tentava organizar arquivos JS "da maneira dos trilhos". Eles foram anteriormente espalhados por diferentes pontos de vista. Organizei-os em arquivos separados e os compilei com o pipeline de ativos. No entanto, acabei de saber que o evento "pronto" do jQuery não é acionado nos cliques subseqüentes quando o turbo-link está ativado. A primeira vez que você carrega uma página, ela funciona. Mas quando você clica em um link, qualquer coisa dentro do ready( function($) {arquivo não é executada (porque a página não é carregada novamente). Boa explicação: aqui .

Portanto, minha pergunta é: Qual é a maneira correta de garantir que os eventos jQuery funcionem corretamente enquanto os links turbo estiverem ativados? Você agrupa os scripts em um ouvinte específico do Rails? Ou talvez os trilhos tenham alguma mágica que o torna desnecessário? Os documentos são um pouco vagos sobre como isso deve funcionar, especialmente no que diz respeito ao carregamento de vários arquivos por meio do manifesto (s) como application.js.

Aqui está o que eu faço ... CoffeeScript:

ready = ->

  ...your coffeescript goes here...

$(document).ready(ready)
$(document).on('page:load', ready)

a última linha ouve o carregamento da página, que é o que os links turbo acionarão.

Editar ... adicionando versão Javascript (por solicitação):

var ready;
ready = function() {

  ...your javascript goes here...

};

$(document).ready(ready);
$(document).on('page:load', ready);

Editar 2 ... O Rails 5 (Turbolinks 5) page:loadtorna turbolinks:load- se e será disparado na carga inicial. Para que possamos fazer o seguinte:

$(document).on('turbolinks:load', function() {

  ...your javascript goes here...

});

Acabei de aprender de outra opção para resolver esse problema. Se você carregar a jquery-turbolinksgema, ela vinculará os eventos Rails Turbolinks aos document.readyeventos, para que você possa escrever seu jQuery da maneira usual. Você acabou de adicionar jquery.turbolinkslogo depois jqueryno arquivo de manifesto js (por padrão application.js:).

Recentemente, encontrei a maneira mais limpa e fácil de entender:

$(document).on 'ready page:load', ->
  # Actions to do

OU

$(document).on('ready page:load', function () {
  // Actions to do
});

EDIT
Se você delegou eventos vinculados a document, certifique-se de anexá-los fora da readyfunção, caso contrário eles serão recuperados em todos os page:loadeventos (fazendo com que as mesmas funções sejam executadas várias vezes). Por exemplo, se você tiver chamadas como esta:

$(document).on 'ready page:load', ->
  ...
  $(document).on 'click', '.button', ->
    ...
  ...

Tire-os da readyfunção, assim:

$(document).on 'ready page:load', ->
  ...
  ...

$(document).on 'click', '.button', ->
  ...

Eventos delegados vinculados ao documentnão precisam ser vinculados ao readyevento.

Encontrei isso na documentação do Rails 4 , semelhante à solução do DemoZluk, mas um pouco menor:

$(document).on 'page:change', ->
  # Actions to do

OU

$(document).on('page:change', function () {
  // Actions to do
});

Se você tiver scripts externos que chamam $(document).ready()ou se não puder se preocupar em reescrever todo o JavaScript existente, essa gema permitirá que você continue usando o $(document).ready()TurboLinks: https://github.com/kossnocorp/jquery.turbolinks

De acordo com as novas guias de trilhos , a maneira correta é fazer o seguinte:

$(document).on('turbolinks:load', function() {
   console.log('(document).turbolinks:load')
});

ou, em coffeescript:

$(document).on "turbolinks:load", ->
alert "page has loaded!"

Não ouça o evento $(document).readye apenas um evento será acionado. Sem surpresas, sem necessidade de usar a jquery.turbolinks .

Isso funciona com os trilhos 4.2 e acima, não apenas com os trilhos 5.

NOTA: Consulte a resposta do @ SDP para obter uma solução limpa e integrada

Corrigi-o da seguinte maneira:

inclua application.js antes que os outros arquivos js dependentes do aplicativo sejam incluídos, alterando a ordem de inclusão da seguinte maneira:

// in application.js - make sure `require_self` comes before `require_tree .`
//= require_self
//= require_tree .

Defina uma função global que lida com a ligação em application.js

// application.js
window.onLoad = function(callback) {
  // binds ready event and turbolink page:load event
  $(document).ready(callback);
  $(document).on('page:load',callback);
};

Agora você pode vincular coisas como:

// in coffee script:
onLoad ->
  $('a.clickable').click => 
    alert('link clicked!');

// equivalent in javascript:
onLoad(function() {
  $('a.clickable').click(function() {
    alert('link clicked');
});

Nenhuma das opções acima funciona para mim, resolvi isso não usando $ (document) .ready do jQuery, mas use addEventListener.

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

$(document).on 'ready turbolinks:load', ->
  console.log '(document).turbolinks:load'

Você tem que usar:

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

do turbolinks doc .

Ou use o

$(document).on "page:load", attachRatingHandler

ou use a função .on do jQuery para obter o mesmo efeito

$(document).on 'click', 'span.star', attachRatingHandler

veja aqui para mais detalhes: http://srbiv.github.io/2013/04/06/rails-4-my-first-run-in-with-turbolinks.html

Em vez de usar uma variável para salvar a função "ready" e vinculá-la aos eventos, convém acionar o readyevento sempre que page:loadacionar.

$(document).on('page:load', function() {
  $(document).trigger('ready');
});

Aqui está o que eu fiz para garantir que as coisas não sejam executadas duas vezes:

$(document).on("page:change", function() {
     // ... init things, just do not bind events ...
     $(document).off("page:change");
});

Acho que o uso da jquery-turbolinksgema ou combinação $(document).readye / $(document).on("page:load")ou $(document).on("page:change")por si só se comporta inesperadamente - especialmente se você estiver em desenvolvimento.

Encontrei o seguinte artigo que funcionou muito bem para mim e detalha o uso do seguinte:

var load_this_javascript = function() { 
  // do some things 
}
$(document).ready(load_this_javascript)
$(window).bind('page:change', load_this_javascript)

Imaginei que deixaria isso aqui para os que estão atualizando para o Turbolinks 5 : a maneira mais fácil de corrigir seu código é:

var ready;
ready = function() {
  // Your JS here
}
$(document).ready(ready);
$(document).on('page:load', ready)

para:

var ready;
ready = function() {
  // Your JS here
}
$(document).on('turbolinks:load', ready);

Referência: https://github.com/turbolinks/turbolinks/issues/9#issuecomment-184717346

$(document).ready(ready)  

$(document).on('turbolinks:load', ready)

Testado tantas soluções finalmente chegou a isso. Muitos desses códigos definitivamente não são chamados duas vezes.

      var has_loaded=false;
      var ready = function() {
        if(!has_loaded){
          has_loaded=true;
           
          // YOURJS here
        }
      }

      $(document).ready(ready);
      $(document).bind('page:change', ready);

Eu costumo fazer o seguinte nos meus 4 projetos rails:

No application.js

function onInit(callback){
    $(document).ready(callback);
    $(document).on('page:load', callback);
}

No restante dos arquivos .js, em vez de usar $(function (){})eu chamoonInit(function(){})

Primeiro, instale a jquery-turbolinksgema. E não esqueça de mover os arquivos Javascript incluídos do final do seu corpo application.html.erbpara o dele <head>.

Conforme descrito aqui , se você tiver colocado o link javascript do aplicativo no rodapé por motivos de otimização de velocidade, será necessário movê-lo para a tag para que seja carregado antes do conteúdo da tag. Esta solução funcionou para mim.

Descobri minhas funções dobradas ao usar uma função para readye, turbolinks:loadpor isso, usei,

var ready = function() {
  // you code goes here
}

if (Turbolinks.supported == false) {
  $(document).on('ready', ready);
};
if (Turbolinks.supported == true) {
  $(document).on('turbolinks:load', ready);
};

Dessa forma, suas funções não dobram se turbolinks forem suportados!