主干 js .listenTo 与 .on [英] Backbone js .listenTo vs .on

问题描述

下面两行代码的优缺点是什么?我不明白为什么有两种不同的方法可以做同样的事情.

What are the advantages and disadvantages of the following 2 lines of code? I don't understand why there are 2 different ways to do the same thing.

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

此外，在使用 .on 时，我如何确定是默认上下文?

Also when using .on, how do I determine is the default context?

推荐答案

listenTo 是更新更好的选择，因为这些监听器会在 stopListening 期间自动为你移除当视图被移除时调用(通过 remove()).在 listenTo 之前，有一个非常隐蔽的问题，即幻视视图永远存在(泄漏内存并导致错误行为)，因为视图方法被引用为模型上的事件侦听器，即使视图实例本身早已不复存在并且没有DOM 中的时间更长.

listenTo is the newer and better option because these listeners will be automatically removed for you during stopListening which is called when a view gets removed (via remove()). Prior to listenTo there was a really insidious problem with phantom views hanging around forever (leaking memory and causing misbehavior) because view methods were referenced as event listeners on models even though the view instances themselves were long gone and no longer in the DOM.

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

If you want to read the back story for listenTo, search the backbone github repository for listenTo and read through some of the longer issue discussions.

至于默认上下文，有几件事最终可以绑定到this:

As to the default context, several things can end up bound to this:

• 如果您通过 this.listenTo 进行绑定，它将始终是视图实例(Wim Leers 在评论中指出)
• 没有this.listenTo，故事会变得复杂
  • 对于其他事件，它将是全局对象(最好避免这种情况)
  • 对于 DOM 事件，它将是源元素，就像在常规 DOM 事件绑定中一样
  • 如果你提供一个明确的上下文(foo.on 的第三个参数)，主干将使用它(因此这是一个更健壮的方法)
  • 如果你使用ECMA标准的function(){//你的事件处理程序}.bind(this)，你也可以手动控制上下文(也推荐)
  • 正如@mu 所指出的，_.bind 或 $.proxy 是 ECMA function.bind
  的替代品
  • 对于主干视图，执行 this.bindAll('onClick', ...) 将确保当任何视图方法用作事件处理程序
  • if you do the binding via this.listenTo, it will always be the view instance (pointed out by Wim Leers in the comments)
  • without this.listenTo, the story gets complicated
    • For misc events, it will be the global object (best to avoid this)
    • for DOM events, it will be the source element just like in regular DOM event binding
    • If you provide an explicit context (the 3rd argument to foo.on), backbone will use that (thus this is a more robust approach)
    • If you use the ECMA standard function () {//your event handler}.bind(this), you can also manually control the context (also recommended)
    • As @mu pointed out, _.bind or $.proxy are available alternatives to ECMA function.bind
    • For backbone views, doing this.bindAll('onClick', ...) will ensure the view instance is the this context when any view methods are used as event handlers

    所以总结成一些指导方针:

    So to summarize into some guidelines:

    • 尽可能使用 events 属性，因为它简洁且正确
    • 使用 this.listenTo 来绑定模型和集合
    • 任何额外的绑定记得使用你喜欢的方法可靠地绑定上下文.我通常使用 ECMA Function.bind 因为嘿，标准，但这里有几个不错的选择.
    • use the events property whenever possible as it is concise and correct
    • use this.listenTo for all bindings to models and collections
    • any additional bindings remember to bind the context reliably using your preferred method. I usually use ECMA Function.bind because hey, standards, but there are several good options here.

    这篇关于主干 js .listenTo 与 .on的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！