Backbonejs:.on vs .listenTo vs .bind [英] Backbonejs: .on vs .listenTo vs .bind

问题描述

.on、.listenTo 和 .bind 有什么区别?

What are the differences among .on, .listenTo, and .bind?

我在这里测试了它们，它们似乎做同样的事情:回调.

I tested them here and they seem do the same thing: a callback.

var NewStatusView = Backbone.View.extend({

    events: {
        "submit form": "addStatus"
    },

    initialize: function(options) {

        // using .on
        //this.collection.on("add", this.clearInput, this);

        // or using bind: 
        //_.bindAll(this, 'addStatus', 'clearInput');
        //this.collection.bind('add', this.clearInput);

        // or using listenTo: 
         _.bindAll(this, 'addStatus', 'clearInput');
        this.listenTo(this.collection, 'add', this.clearInput) ;
    },

    addStatus: function(e) {
        e.preventDefault();
        this.collection.create({ text: this.$('textarea').val() });
    },

    clearInput: function() {
        this.$('textarea').val('');
    }
});

什么时候和在什么场景下使用哪个最好?

When and in scenario to use which is the best?

推荐答案

通常最好使用 listenTo()

It's usually best to use listenTo()

来自 Backbone Essentials 作者:Addy Osmani:

From Backbone Essentials by Addy Osmani:

虽然 on() 和 off() 直接向观察对象添加回调，listenTo() 告诉一个对象监听另一个对象上的事件，允许侦听器跟踪它所针对的事件听.stopListening() 随后可以在侦听器上调用告诉它停止监听事件:

While on() and off() add callbacks directly to an observed object, listenTo() tells an object to listen for events on another object, allowing the listener to keep track of the events for which it is listening. stopListening() can subsequently be called on the listener to tell it to stop listening for events:

var a = _.extend({}, Backbone.Events);
var b = _.extend({}, Backbone.Events);
var c = _.extend({}, Backbone.Events);

// add listeners to A for events on B and C
a.listenTo(b, 'anything', function(event){ console.log("anything happened"); });
a.listenTo(c, 'everything', function(event){ console.log("everything happened"); });

// trigger an event
b.trigger('anything'); // logs: anything happened

// stop listening
a.stopListening();

// A does not receive these events
b.trigger('anything');
c.trigger('everything');

如果您使用开和关并删除视图及其对应的模型同时，一般没有问题.但是有个问题当您删除已注册以收到通知的视图时出现模型上的事件，但您不会删除模型或调用删除视图的事件处理程序.由于模型有参考视图的回调函数，JavaScript 垃圾收集器不能从内存中删除视图.这称为鬼视图，是一种形式内存泄漏很常见，因为模型通常倾向于在应用程序的生命周期中比相应的视图更长寿.为了有关该主题和解决方案的详细信息，请查看这篇优秀文章德里克·贝利.

If you use on and off and remove views and their corresponding models at the same time, there are generally no problems. But a problem arises when you remove a view that had registered to be notified about events on a model, but you don’t remove the model or call off to remove the view’s event handler. Since the model has a reference to the view’s callback function, the JavaScript garbage collector cannot remove the view from memory. This is called a ghost view and is a form of memory leak which is common since the models generally tend to outlive the corresponding views during an application’s lifecycle. For details on the topic and a solution, check this excellent article by Derick Bailey.

实际上，在对象上调用的每个 on 也需要一个 off调用是为了让垃圾收集器完成它的工作.listenTo()改变这一点，允许视图绑定到模型通知和解除绑定只需一次调用即可从所有这些中调用 - stopListening().

Practically, every on called on an object also requires an off to be called in order for the garbage collector to do its job. listenTo() changes that, allowing Views to bind to Model notifications and unbind from all of them with just one call - stopListening().

View.remove() 的默认实现调用stopListening()，确保任何使用 listenTo() 绑定的侦听器在视图被销毁之前未绑定.

The default implementation of View.remove() makes a call to stopListening(), ensuring that any listeners bound using listenTo() are unbound before the view is destroyed.

var view = new Backbone.View();
var b = _.extend({}, Backbone.Events);

view.listenTo(b, 'all', function(){ console.log(true); });
b.trigger('anything');  // logs: true

view.listenTo(b, 'all', function(){ console.log(false); });
view.remove(); // stopListening() implicitly called
b.trigger('anything');  // does not log anything

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