1

我正在关注一个主干.js 教程，遇到了 2 个函数initialize()和render(). initialize()在使用$(self.el).append()时附加一些 html 时render()使用$(this.el).append()。我对差异感到困惑，希望得到解释，谢谢！

JS代码

// Views
window.WineListView = Backbone.View.extend({

    tagName:'ul',

    initialize:function () {
        this.model.bind("reset", this.render, this);
        var self = this;
        this.model.bind("add", function (wine) {
            $(self.el).append(new WineListItemView({model:wine}).render().el);
        });
    },

    render:function (eventName) {
        _.each(this.model.models, function (wine) {
            $(this.el).append(new WineListItemView({model:wine}).render().el);
        }, this);
        return this;
    }
});
4

2 回答 2

4

第一个用于在事件触发时self保留this对范围何时更改的引用。在匿名函数内部（对于事件处理程序），this将引用触发事件的元素，而不是您的 Backbone 控制器。

在第二种情况下不需要引用。

于 2012-06-13T12:26:06.040 回答
3

原因在于 JavaScript 如何处理作用域。

在他们做的初始化函数中

var self = this;

因此，当他们将引用绑定到已初始化的 WineListView 实例时

this.model.bind("add", function (wine) {
    $(self.el).append(new WineListItemView({model:wine}).render().el);
 });

但是，如果您将“this”作为第三个参数发送，则可以在没有 self 变量的情况下完成。第三个参数应指示应在其中调用回调的范围

this.model.bind("add", function (wine) {
    $(this.el).append(new WineListItemView({model:wine}).render().el);
 }, this);

如果你看那里的render is bind，它也使用了第三个参数

this.model.bind("reset", this.render, this);

Disclamer 我没有尝试过代码，但是通过阅读骨干网 http://backbonejs.org/#FAQ-this上的文档得到了这个

于 2012-06-13T12:38:44.853 回答