web-dev-qa-db-fra.com

delegateEvents dans backbone.js

Quelqu'un peut-il m'expliquer ce que fait delegateEvents dans backbone.js? La documentation ne m'a pas aidé à comprendre.

Mon cas d'utilisation exact est:

J'ai une vue principale X avec une vue intérieure Y. Ils fonctionnent très bien, mais si je vais à la vue principale Z et que je reviens à X (réutilisation, pas recréation), les événements attachés aux éléments enfants Y sont perdus. delegateEvents résout ce problème, mais je veux comprendre pourquoi.

backbone.jsbackbone-events
28
Yaron Naveh

Essentiellement, lorsque vous appelez .remove(), c'est un proxy de la fonction jQuery remove , qui supprime l'élément du DOM, ainsi que tous les événements associés du hachage d'événement qui étaient liés à l'élément.

L'élément View de Backbone contient toujours le .el, Mais lors de sa réinsertion dans le DOM, l'élément jQuery a perdu tous ses écouteurs liés.

Il existe quelques solutions:

  1. Détruisez complètement l'élément de vue, y compris la dissociation de tous les événements de modèle/contrôleur avec la nouvelle méthode destroy (actuellement uniquement dans le github, il sera ajouté dans la prochaine version de Backbone) et créera une nouvelle vue à l'arrivée retour (plutôt que simplement la mise en cache et le rendu) - ma méthode préférée

  2. Créez une méthode (ou étendez remove) pour utiliser jQuery's detatch qui fait apparemment la même chose que remove sans perdre les liaisons d'événement - ne l'a pas fait mais semble fonctionner

  3. Appelez .delegateEvents() dans chaque rendu - ce que vous faites actuellement

J'espère que cela t'aides.

37
tgriesser

delegateEvents prend le events: { ... } déclaration pour votre instance de vue, et lie les événements spécifiés aux éléments DOM spécifiés, avec les méthodes de rappel spécifiées pour gérer les événements.

Ainsi, une arborescence DOM qui ressemble à ceci après avoir été rendue:

<div> 
  <a href="#" id="foo">foo</a>
</div>

Et une vue définie comme ceci:


Backbone.View.extend({
  events: {
    "click .foo": "fooClicked"
  },

  fooClicked: function(e){
    // handle the click, here
  },

  render: function(){
    // render the specified HTML, here
  }
});

gérera correctement le clic sur le lien "foo", afin que vous puissiez répondre au clic dans votre code.

La répartition de la déclaration events est la suivante: "eventname selector": "callback" où "nom_événement" est un événement DOM, tel que "clic". "sélecteur" est tout sélecteur jQuery valide, qui est exécuté sur le el de votre vue pour l'élément DOM auquel lier l'événement. "callback" est le nom de la méthode à appeler dans cette vue, lorsque l'événement de cet élément DOM se déclenche.

j'espère que cela pourra aider

11
Derick Bailey