66

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

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

另外在使用 .on 时，如何确定是默认上下文？

4

2 回答 2

120

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

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

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

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

所以总结为一些指导方针：

  • events尽可能使用该属性，因为它简洁正确
  • 用于this.listenTo模型和集合的所有绑定
  • 任何其他绑定都记得使用您的首选方法可靠地绑定上下文。我通常使用 ECMA Function.bind，因为嘿，标准，但这里有几个不错的选择。
于 2013-05-29T21:24:18.330 回答
0

使用listenTo，您要监听其事件的对象作为第一个参数传递。在 的情况下on，它实际上是该对象上的一个方法。

listenToover的优点on是：

  • 侦听器会跟踪所有事件处理程序，以便在需要时更轻松地一次性删除它们。

  • 回调的上下文始终设置为侦听器本身。

于 2017-04-10T11:35:19.107 回答