Question

我希望我的视图在首次创建时自我渲染，因此我在this.render();函数中调用initialize:，就像这样（删除了一些代码）：

var MyView = Backbone.View.extend({

    el: $("#mydiv"),

    initialize: function() {
        this.render();
    }
...

在render:函数中，我循环遍历子集合，并附加每个子元素的渲染视图：

render: function() {
    this.model.somecollection.forEach(function(c) {
        var view = new ChildView({ model: c });
        this.el.append(view.render().el); //*****
    });
    return this;
},

我遇到的问题是，渲染函数中的this（用星号标记）的引用设置为window而不是MyView对象，并且它会导致错误。

我假设我正在调用渲染错误（目前为this.render();）。我该怎么做才能保留this上下文？

Answer 1

将this保存在for循环之外。

var that = this;

如果您使用this，则

_.each()不会在循环内传输。

Answer 2

在Javascript中，无论何时输入新的函数上下文，this的值都可能已更改。您需要做的就是在输入函数之前存储this的值：

render: function() {
    var self = this;
    this.model.somecollection.forEach(function(c) {
        var view = new ChildView({ model: c });
        self.el.append(view.render().el); //*****
    });
    return this;
},

Answer 3

这就是我们在这里使用它的方式，

这样，初始化时仍会调用渲染。

ContactView = Backbone.View.extend({
    initialize: function(){
        this.render();
    },
    render: function(){
        // we use underscsore templating, this just gives a chunk of html
        var template = _.template( $("#search_template").html(), {} );
        // and we load that template html into the Backbone "el"
        this.el.html( template );
    }
});

我们在创建视图时将'el'赋予视图，并且render函数将html插入到该元素中。

var contact_view = new ContactView({ el: $("#contact-list") });

Answer 4

在匿名函数的上下文中，这指的是全局范围。如果您希望以您编写的方式使用代码，则需要明确地保留它。假设你的页面中有jquery：$ .proxy函数可以使用：

this.model.somecollection.forEach($.proxy(function(c) {
        var view = new ChildView({ model: c });        
        this.el.append(view.render().el);
 },this));

或者，下划线有一个_.bind函数，它以类似的方式工作。此外，如果您定义局部变量并将其分配给匿名函数外部，则可以在匿名函数内使用它代替此函数。

Answer 5

如果somecollection是Backbone.Collection你应该能够说：

this.model.somecollection.each(..., this);

最后一个参数是函数内部使用的上下文。

Backbone.js：从视图的Initialize：函数调用render（）

5 个答案: