Backbone js .listenTo vs .on

¿Cuáles son las ventajas y desventajas de las siguientes 2 líneas de código? No entiendo por qué hay dos formas diferentes de hacer lo mismo.

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

Además, cuando se usa .on, ¿cómo determino cuál es el contexto predeterminado?

listenTo es la opción más nueva y mejor porque estos oyentes se eliminarán automáticamente durante stopListening que se llama cuando se elimina una vista (a través de remove() ). Antes de listenTo Hubo un problema realmente insidioso con las vistas fantasmas rondando por siempre (filtración de memoria y causando mal comportamiento) porque los métodos de visualización se referenciaron como detectores de eventos en los modelos aunque las instancias de vista habían desaparecido y ya no estaban en el DOM.

Si desea leer la historia anterior de listenTo , busque en el repository backbone github para listenTo y lea algunas de las discusiones más listenTo .

En cuanto al contexto predeterminado, varias cosas pueden terminar ligadas a this :

  • si haces el enlace a través de this.listenTo , siempre será la instancia de la vista (señalada por Wim Leers en los comentarios)
  • sin this.listenTo , la historia se complica
    • Para eventos misceláneos, será el objeto global (lo mejor es evitar esto)
    • para los eventos DOM, será el elemento de origen como en el enlace de evento DOM regular
    • Si proporciona un contexto explícito (el 3er argumento para foo.on ), la red troncal usará eso (por lo tanto, este es un enfoque más robusto)
    • Si usa la function () {//your event handler}.bind(this) estándar de ECMA function () {//your event handler}.bind(this) , también puede controlar manualmente el contexto (también recomendado)
    • Como @mu señaló, _.bind o $.proxy son alternativas disponibles a la function.bind $.proxy
    • Para las vistas de red troncal, al hacer this.bindAll('onClick', ...) se asegurará de que la instancia de la vista sea el contexto en el que se utilizan los métodos de vista como controladores de eventos.
  • cualquier evento conectado mediante el uso de la propiedad de events estándar de la vista se vinculará automáticamente a la instancia de vista por red troncal (esto es cinturón y tirantes con bindAll )

Para resumir en algunas pautas:

  • use la propiedad de events siempre que sea posible ya que es conciso y correcto
  • use this.listenTo para todas las vinculaciones de modelos y colecciones
  • cualquier enlace adicional recuerde enlazar el contexto de manera confiable utilizando su método preferido. Usualmente uso ECMA Function.bind porque oye, estándares, pero aquí hay varias buenas opciones.

Con listenTo , el objeto cuyos eventos desea escuchar se pasa como primer argumento. En el caso de on , en realidad es un método en ese objeto.

Las ventajas de listenTo over on son:

  • El oyente realiza un seguimiento de todos los controladores de eventos, por lo que es más fácil eliminarlos todos de una vez cuando sea necesario.

  • El contexto de la callback siempre se establece en el oyente en sí.