骨干 js .listenTo 与 .on答案

【问题标题】：Backbone js .listenTo vs .on骨干 js .listenTo 与 .on
【发布时间】：2013-05-29 21:03:10
【问题描述】：

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

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

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

【问题讨论】：

标签： backbone.js

【解决方案1】：

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

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

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

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

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

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

【讨论】：

如果您不想（或不能）使用 ECMA 的 bind，还有 _.bind 和 $.proxy。
我遇到 jasmine-headless-webkit 显然在抱怨 ECMA 的 bind，“未定义不是函数”，尽管 jasmine 套件在浏览器中传递。我改用下划线的bindAll。
请注意，您在使用listenTo 时不能设置显式上下文；它始终是 listenTo 是一个方法的对象。没有第四个参数。
如果我们需要设置一个特定的上下文，你能举一个替代的例子吗？
@NickBarrett app.Todos.on('change:completed', this.filterOne.bind(<specific_context>)); 或 this.listenTo(app.Todos, 'change:completed', this.filterOne.bind(<specific_context>));

【解决方案2】：

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

listenTo 相对于on 的优势在于：

侦听器会跟踪所有事件处理程序，以便在需要时一次性将它们全部删除。
回调的上下文始终设置为侦听器本身。

【讨论】：