Backbonejs：。对VS .listenTo VS .bind [英] Backbonejs: .on vs .listenTo vs .bind

问题描述

什么是中。对， listenTo 和 .bi​​nd <差异/ code>？

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（）

从阿迪·奥斯马尼 骨干要点：

From Backbone Essentials by Addy Osmani:

虽然关于（）和关闭（）直接添加回调来观察对象，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.

实际上，每对称为一个对象还需要，为了使垃圾收集器来完成其工作被称为关断。 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：。对VS .listenTo VS .bind的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！