Rails 4: comment utiliser $ (document) .ready () avec des turbo-liens

J'ai rencontré un problème dans mon application Rails 4 en essayant d'organiser les fichiers JS "à la manière des rails". Ils étaient auparavant dispersés dans différentes vues. Je les ai organisés dans des fichiers séparés et les compile avec le pipeline d'actifs. Cependant, je viens d'apprendre que l'événement "prêt" de jQuery ne se déclenche pas lors des clics suivants lorsque la liaison est activée. La première fois que vous chargez une page, cela fonctionne. Mais lorsque vous cliquez sur un lien, rien à l'intérieur de ready( function($) {ne sera exécuté (car la page ne se charge pas à nouveau). Bonne explication: ici .

Ma question est donc la suivante: quelle est la bonne façon de s'assurer que les événements jQuery fonctionnent correctement lorsque les turbo-liens sont activés? Enveloppez-vous les scripts dans un écouteur spécifique à Rails? Ou peut-être que les rails ont une magie qui les rend inutiles? Les documents sont un peu vagues sur la façon dont cela devrait fonctionner, en particulier en ce qui concerne le chargement de plusieurs fichiers via le (s) manifeste (s) comme application.js.

Voici ce que je fais ... CoffeeScript:

ready = ->

  ...your coffeescript goes here...

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

la dernière ligne écoute le chargement de la page, ce qui déclenchera les liens turbo.

Modifier ... en ajoutant la version Javascript (par demande):

var ready;
ready = function() {

  ...your javascript goes here...

};

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

Edit 2 ... For Rails 5 (Turbolinks 5) page:loaddevient turbolinks:loadet sera même déclenché à la charge initiale. Nous pouvons donc simplement faire ce qui suit:

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

  ...your javascript goes here...

});

Je viens d'apprendre une autre option pour résoudre ce problème. Si vous chargez la jquery-turbolinksgemme, elle liera les événements Rails Turbolinks aux document.readyévénements afin que vous puissiez écrire votre jQuery de la manière habituelle. Vous venez d'ajouter jquery.turbolinksjuste après jquerydans le fichier manifeste js (par défaut:) application.js.

Récemment, j'ai trouvé le moyen le plus propre et le plus facile à comprendre:

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

OU

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

EDIT
Si vous avez des événements délégués liés à l ' document, assurez-vous de les attacher en dehors de la readyfonction, sinon ils seront rebondis sur chaque page:loadévénement (provoquant l'exécution des mêmes fonctions plusieurs fois). Par exemple, si vous avez des appels comme celui-ci:

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

Retirez-les de la readyfonction, comme ceci:

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

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

Les événements délégués liés au documentne doivent pas nécessairement être liés à l' readyévénement.

Trouvé dans la documentation de Rails 4 , similaire à la solution de DemoZluk mais légèrement plus courte:

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

OU

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

Si vous avez des scripts externes qui appellent $(document).ready()ou si vous ne pouvez pas être dérangé par la réécriture de tout votre JavaScript existant, ce joyau vous permet de continuer à utiliser $(document).ready()avec TurboLinks: https://github.com/kossnocorp/jquery.turbolinks

Selon les nouveaux guides de rails , la bonne façon est de procéder comme suit:

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

ou, en coffeescript:

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

N'écoutez pas l'événement $(document).readyet un seul événement sera déclenché. Pas de surprise, pas besoin d'utiliser le joyau jquery.turbolinks .

Cela fonctionne avec les rails 4.2 et supérieurs, pas seulement les rails 5.

REMARQUE: Voir la réponse de @ SDP pour une solution propre et intégrée

Je l'ai corrigé comme suit:

assurez-vous d'inclure application.js avant que les autres fichiers js dépendants de l'application ne soient inclus en modifiant l'ordre d'inclusion comme suit:

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

Définissez une fonction globale qui gère la liaison dans application.js

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

Maintenant, vous pouvez lier des trucs comme:

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

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

Rien de ce qui précède ne fonctionne pour moi, j'ai résolu cela en n'utilisant pas $ (document) .ready de jQuery, mais en utilisant addEventListener à la place.

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

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

Vous devez utiliser:

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

de turbolinks doc .

Soit utiliser le

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

ou utilisez la fonction .on de jQuery pour obtenir le même effet

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

voir ici pour plus de détails: http://srbiv.github.io/2013/04/06/rails-4-my-first-run-in-with-turbolinks.html

Au lieu d'utiliser une variable pour enregistrer la fonction "prête" et la lier aux événements, vous souhaiterez peut-être déclencher l' readyévénement chaque fois qu'il se page:loaddéclenche.

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

Voici ce que j'ai fait pour m'assurer que les choses ne sont pas exécutées deux fois:

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

Je trouve que l'utilisation de la jquery-turbolinksgemme ou la combinaison $(document).readyet / $(document).on("page:load")ou l'utilisation $(document).on("page:change")par elle-même se comporte de manière inattendue - surtout si vous êtes en développement.

J'ai trouvé l' article suivant qui a très bien fonctionné pour moi et détaille l'utilisation des éléments suivants:

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

Je pensais que je laisserais cela ici pour ceux qui passent à Turbolinks 5 : la façon la plus simple de corriger votre code est de:

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

à:

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

Référence: https://github.com/turbolinks/turbolinks/issues/9#issuecomment-184717346

$(document).ready(ready)  

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

Tester tant de solutions est finalement arrivé à cela. Ce nombre de votre code n'est certainement pas appelé deux fois.

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

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

Je fais généralement ce qui suit pour mes projets rails 4:

Dans application.js

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

Ensuite, dans le reste des fichiers .js, au lieu d'utiliser $(function (){})j'appelleonInit(function(){})

Tout d'abord, installez jquery-turbolinksgem. Et puis, n'oubliez pas de déplacer vos fichiers Javascript inclus de la fin du corps de votre application.html.erbvers son <head>.

Comme décrit ici , si vous avez mis le lien javascript de l'application dans le pied de page pour des raisons d'optimisation de la vitesse, vous devrez le déplacer dans la balise afin qu'il se charge avant le contenu de la balise. Cette solution a fonctionné pour moi.

J'ai trouvé mes fonctions doublées lors de l'utilisation d'une fonction pour readyet turbolinks:loadj'ai donc utilisé,

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

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

De cette façon, vos fonctions ne doublent pas si les turboliens sont pris en charge!