web-dev-qa-db-fra.com

Backbone js .listenTo vs .on

Quels sont les avantages et les inconvénients des 2 lignes de code suivantes? Je ne comprends pas pourquoi il y a 2 façons différentes de faire la même chose.

this.listenTo(app.Todos, 'change:completed', this.filterOne);
app.Todos.on('change:completed', this.filterOne);

De plus, lorsque j'utilise .on, comment déterminer le contexte par défaut?

backbone.js
65
Chris Muench

listenTo est l'option la plus récente et la meilleure car ces écouteurs seront automatiquement supprimés pour vous pendant stopListening qui est appelée lorsqu'une vue est supprimée (via remove()). Avant listenTo, il y avait un problème vraiment insidieux avec les vues fantômes qui traînaient éternellement (fuite de mémoire et inconduite), car les méthodes d'affichage étaient référencées comme écouteurs d'événements sur les modèles, même si les instances de vue elles-mêmes étaient depuis longtemps disparues et ne sont plus dans le DOM.

Si vous voulez lire l'histoire arrière pour listenTo, recherchez listenTo dans le référentiel github de backbone et lisez quelques-unes des discussions les plus longues sur les problèmes.

Quant au contexte par défaut, plusieurs choses peuvent finir liées à this:

  • si vous effectuez la liaison via this.listenTo, ce sera toujours l'instance de vue (signalée par Wim Leers dans les commentaires)
  • sans this.listenTo, l'histoire se complique
    • Pour les événements divers, ce sera l'objet global (mieux vaut éviter cela)
    • pour les événements DOM, ce sera l'élément source, tout comme dans la liaison d'événements DOM régulière
    • Si vous fournissez un contexte explicite (le 3ème argument de foo.on), Le backbone l'utilisera (c'est donc une approche plus robuste)
    • Si vous utilisez la norme ECMA function () {//your event handler}.bind(this), vous pouvez également contrôler manuellement le contexte (également recommandé)
    • Comme l'a souligné @mu, _.bind Ou $.proxy Sont des alternatives disponibles à l'ECMA function.bind
    • Pour les vues de backbone, faire this.bindAll('onClick', ...) assurera que l'instance de vue est le contexte this lorsque des méthodes de vue sont utilisées comme gestionnaires d'événements
  • tous les événements câblés à l'aide de la propriété events standard de la vue seront automatiquement liés à l'instance de la vue par le réseau principal (il s'agit de ceintures et bretelles avec bindAll)

Donc, pour résumer en quelques lignes directrices:

  • utilisez la propriété events autant que possible car elle est concise et correcte
  • utilisez this.listenTo pour toutes les liaisons aux modèles et collections
  • n'oubliez pas de lier le contexte de manière fiable à l'aide de votre méthode préférée. J'utilise habituellement ECMA Function.bind Car bon, les standards, mais il y a plusieurs bonnes options ici.
118
Peter Lyons

Avec listenTo, l'objet dont vous souhaitez écouter les événements est passé comme premier argument. Dans le cas de on, il s'agit en fait d'une méthode sur cet objet.

Les avantages de listenTo sur on sont:

  • L'auditeur garde une trace de tous les gestionnaires d'événements, ce qui facilite leur suppression en une fois en cas de besoin.

  • Le contexte du rappel est toujours défini sur l'auditeur lui-même.

0
Dhaval Rajpara