Backbone.js ：.on与.listenTo与.bind [重复]

此问题在此处已有答案：

Backbone js .listenTo vs .on（2个答案）
四年前就关门了。
.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('');
    }
});

在什么时候和在什么情景下使用哪一种是最好的？

通常最好使用listenTo()
来自艾迪·奥斯曼尼的《 Backbone 要点》：
当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并删除视图及其相应的模型，通常不会有问题。但是，如果删除一个已注册为接收模型事件通知的视图，但没有删除模型或调用off来删除视图的事件处理程序，则会出现问题。由于模型引用了视图的回调函数，JavaScript垃圾收集器无法从内存中删除视图。这被称为ghost视图，是一种内存泄漏形式，这是很常见的，因为在应用程序的生命周期中，模型通常比相应的视图更长寿。有关该主题和解决方案的详细信息，请查看DerickBailey的这篇优秀文章。
实际上，在一个对象上调用的每个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

Backbone.js ：.on与.listenTo与.bind [重复]

1条答案

相关问题

热门标签

最新问答