Backbone js .listenTo vs .on

以下两行代码有什么优点和缺点？ 我不明白为什么有两种不同的方式来做同样的事情。

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

另外当使用.on，我如何确定是默认的上下文？

Answer 1

listenTo是更新和更好的选项，因为这些监听器会在stopListening期间被自动删除，当视图被删除时（通过remove() ）被调用。 在listenTo之前，有一个非常隐秘的问题，因为视图方法被引用为模型上的事件监听器，即使视图实例本身已经不存在了，而且不再存在于DOM中，因此幻影视图将永远listenTo （泄漏内存并导致错误行为）。

如果您想要阅读listenTo的背景故事，请在主干github存储库中searchlistenTo并通读一些较长的问题讨论。

至于默认的上下文，有几件事情可能会被绑定到this ：

• 如果你通过this.listenTo进行绑定，它将永远是视图实例（Wim Leers在评论中指出）
• 没有this.listenTo ，故事变得复杂
  • 对于其他事件，它将是全局对象（最好避免这种情况）
  • 对于DOM事件来说，它就像在常规的DOM事件绑定中一样是源元素
  • 如果你提供一个明确的上下文（ foo.on的第三个参数），骨干将使用它（因此这是一个更强大的方法）
  • 如果您使用ECMA标准function () {//your event handler}.bind(this) ，您也可以手动控制上下文（也推荐）
  • 正如@mu指出的那样， _.bind或$.proxy是ECMA function.bind替代品
  • 对于骨干视图，当使用任何视图方法作为事件处理程序时，执行this.bindAll('onClick', ...)将确保视图实例是this上下文
• 任何通过使用视图的标准events属性连接的events都会自动绑定到视图实例上（这是带有bindAll带和吊带）

所以总结一些指导方针：

• 尽可能使用events属性，因为它是简洁和正确的
• 使用this.listenTo来绑定模型和集合
• 任何额外的绑定记住使用您首选的方法可靠地绑定上下文。 我通常使用ECMA Function.bind因为嘿，标准，但是这里有几个很好的select。

Answer 2

通过listenTo ，您想要侦听的事件的对象作为第一个parameter passing。 在on的情况下，它实际上是一个对象的方法。

listenTo的优点是：

• 监听器跟踪所有事件处理程序，使其更容易在需要时一次全部删除。

• callback的上下文总是设置给侦听器本身。