jquery – Backbonejs：.on vs .listenTo vs .bind

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

什么时候和在场景中使用哪个是最好的？

解决方法

通常最好使用listenTo()

从Backbone Essentials by Addy Osmani：

当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');

如果您同时使用on和off以及删除视图及其相应的模型,则通常没有问题.但是当您删除已注册通知模型上的事件的视图时,会出现问题,但不要删除模型或调用以删除视图的事件处理程序.由于模型具有对视图回调函数的引用,所以JavaScript垃圾收集器不能从内存中删除视图.这被称为鬼视图,并且是一种内存泄漏的形式,因为模型通常倾向于在应用程序的生命周期内比较相应的视图.有关该主题和解决方案的详细信息,请查看Derick Bailey的优秀文章.

实际上,每一个对一个对象的调用也需要被调用才能使垃圾回收器做它的工作. 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,function(){ console.log(false); });
view.remove(); // stopListening() implicitly called
b.trigger('anything');  // does not log anything