Question

.on，。listenTo和.bind之间有什么区别？

我在这里测试了它们，它们看起来做同样的事情：回调。

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('');
    }
});

什么时候使用哪种情况最好？

Answer 1

通常最好使用listenTo()

来自Addy Osmani的Backbone Essentials：

on()和off()直接向观察对象添加回调， listenTo()告诉对象侦听另一个对象上的事件，允许监听器跟踪它所处的事件听着。随后可以在监听器上调用stopListening() 告诉它停止听事件：
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垃圾收集器不能   从内存中删除视图。这被称为鬼视图并且是一种形式   由于模型通常倾向于常见的内存泄漏   在应用程序的生命周期中比相应的视图更长久。对于   有关该主题和解决方案的详细信息，请查看此优秀文章   德里克贝利。

实际上，每个on调用一个对象也需要off   调用以便垃圾收集器完成其工作。 listenTo()   更改，允许视图绑定到模型通知和解除绑定   来自所有人只需一次通话 - stopListening()。

View.remove()的默认实现会调用   stopListening()，确保使用listenTo()绑定的任何侦听器   在视图被销毁之前未被绑定。
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

1 个答案: