Backbone js .listenTo vs .on

Question

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);
 

En outre, lors de l'utilisation de .on, comment puis-je déterminer le contexte par défaut?

Answer 1

listenTo est la plus récente et la meilleure option parce que ces écouteurs seront automatiquement supprimés lors de stopListening qui est appelée lorsqu'une vue est supprimée (via remove()). Avant d' listenTo il y a vraiment un problème insidieux fantôme vues traîner éternellement (fuite de mémoire et de causer des débordements), car les méthodes de vue ont été référencés comme des écouteurs d'événement sur les modèles, même si le point de vue des instances elles-mêmes ont disparu depuis longtemps et n'est plus dans les DOM.

Si vous voulez lire l'histoire de retour pour listenTo, de recherche, de l'épine dorsale github pour listenTo et de lire certains des plus émettre de discussions.

Comme pour le contexte par défaut, plusieurs choses peuvent se retrouver lié à l' this:

• si vous ne la liaison via this.listenTo, il sera toujours le point de vue de l'instance (souligné par Wim Leers dans les commentaires)
• sans this.listenTo, l'histoire se complique
  • Pour divers événements, il sera l'objet global (mieux pour éviter ce problème)
  • pour les DOM événements, il sera la source de l'élément, tout comme dans la régulière d'événements DOM liaison
  • Si vous fournissez un contexte explicite (le 3ème argument de foo.on), de la colonne vertébrale va l'utiliser (ainsi, c'est une approche plus solide)
  • Si vous utilisez le standard ECMA function () {//your event handler}.bind(this), vous pouvez également contrôler manuellement le contexte (également recommandé)
  • @Mu a souligné, _.bind ou $.proxy sont à la disposition des solutions de rechange à l'ECMA function.bind
  • Pour la colonne vertébrale vues, faites this.bindAll('onClick', ...) permettra d'assurer l'instance de vue est l' this contexte lorsque toutes les méthodes de vue sont utilisés comme des gestionnaires d'événements
• tous les événements reliés à l'aide de la vue de la norme events propriété obtiendrez lié automatiquement à la vue par exemple de la dorsale (c'est ceinture et bretelles avec bindAll)

Donc, pour résumer en quelques lignes:

• utiliser l' events de la propriété chaque fois que possible, tant il est concise et correcte
• utiliser this.listenTo pour toutes les liaisons vers des modèles et des collections
• supplémentaires liaisons n'oubliez pas de lier le contexte de manière fiable à l'aide de la méthode de votre choix. J'ai l'habitude d'utiliser ECMA Function.bind parce que hey, les normes, mais il ya quelques bonnes options ici.