javascript - `bindAll` 过时了吗？

Question

当然，我阅读了手册，但正如我在经典示例中看到的那样，如果我用绑定(bind)注释该行，它并没有真正的区别。这些方法现在默认绑定(bind)了吗？

(function($){
    var ListView = Backbone.View.extend({
        el: $('#TheList'), // el attaches to existing element
        events: {
            'click button#add': 'addItem'
        },

        initialize: function(){
            // _.bindAll(thathis, 'render', 'addItem'); // every function that uses 'this' as the current object should be in here

            this.counter = 0; // total number of items added thus far
            this.render();
        },

        render: function(){
            $(this.el).append('<button id="add">Add list item</button>');
            $(this.el).append('<ul></ul>');
            // console.log(this);
            // console.log(this.el);
        },

        addItem: function(){
            this.counter++;
            $('ul', this.el).append('<li>hello world'+this.counter+'</li>');
        }
    });

    var listView = new ListView();

})(jQuery);

Answer 1

Jax 是正确的，您不必在最新版本的 Backbone(当前为 1.1.0)中手动绑定(bind)您的 View 方法和事件。早期的版本也是如此，但我不记得是哪一个了。

在某些情况下，您需要绑定(bind) View 方法以使其正常工作。这些情况是基本的 Javascript 范围，与 Backbone JS 无关。

最好不要使用_.bindAll。相反，如果您使用的是 Underscore JS，您应该根据具体情况使用 _.bind 进行绑定(bind)。

实际上，如果您使用的是 Backbone，则也不需要使用 _.bind。 Backbone Events 类上有快捷方法。这意味着您也可以在 Collection 和 Model 类中使用这些快捷方式，因为它们本质上都混合了 Events 类。

这是您需要在 View 类中执行的操作，以将监听器附加到集合或模型。

this.collection.on('add', this.appendItem, this);

或

this.model.on('change', this.render, this);

第三个参数将 View 对象范围绑定(bind)到render 方法。如果没有这个，render 方法将在我认为的模型范围内被调用。

在旁注中，您也可以这样做:

this.collection.bind('add', this.appendItem, this);

on方法其实是bind的别名，不过我觉得用on更清晰。使用 bind 可能会造成混淆。看起来 Backbone 文档更喜欢 on 和 off 而不是 bind 和 unbind。

这里有两个 jsFiddle 可以说明我在说什么。我的示例是从本教程示例修改而来的:http://arturadib.com/hello-backbonejs/docs/5.html

本教程实际上已经存在了很长时间，因此可能不是最好的使用方法。它看起来确实可能已经更新了一点，因为它确实使用了 Backbone 1.10。我还会注意到它使用 _.bindAll。

版本 1 正确使用绑定(bind):http://jsfiddle.net/ChTjs/

相关方法在这里:

initialize: function() {
    this.collection = new List();
    this.collection.on('add', this.appendItem, this);
    this.collection.on('add', this.updateCount, this);
    this.collection.on('remove', this.updateCount, this);
    this.counter = 0;
    this.render();
},

这里:

this.model.on('change', this.render, this);
this.model.on('remove', this.unrender, this);

这是一个没有将 View 范围绑定(bind)到回调的 jsFiddle 版本。 http://jsfiddle.net/LpEW8/1/

尝试一下并慢慢添加绑定(bind)以使代码再次运行。我刚刚意识到 Backbone 文档中实际上提到了这一点。搜索绑定(bind)“this”

编辑 2

刚刚意识到使用listenTo 方法会更好。此处的优点是您的回调将始终绑定(bind)到调用 listenTo 的 View /对象。所以不需要像使用 on 时那样传递 this。额外的好处是监听器将自动删除，而使用 on

时情况并非如此

所以不是这个:

this.collection.on('add', this.appendItem, this);
this.collection.on('add', this.updateCount, this);
this.collection.on('remove', this.updateCount, this);

你在你的 View 中这样做:

this.listenTo(this.collection, 'add', this.appendItem);
this.listenTo(this.collection, 'add', this.updateCount);
this.listenTo(this.collection, 'remove', this.updateCount);

这是 Backbone 文档中 listenTo 的 anchor 链接:http://backbonejs.org/#Events-listenTo

这里还有一个更新的 fiddle :http://jsfiddle.net/ChTjs/2/