javascript Backbone.js：从视图的 Initialize: 函数调用 render()

Backbone.js: calling render() from view's Initialize: function

提问by UpTheCreek

I want to my view to render itself when it is first created, so I am calling this.render();in the initialize:function, like this (some code removed):

我想让我的视图在第一次创建时呈现自己，所以我this.render();在initialize:函数中调用，像这样（删除了一些代码）：

var MyView = Backbone.View.extend({

    el: $("#mydiv"),

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

In the render:function I'm then looping through a child collection, and appending the rendered views of each child element:

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

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

The problem I'm having is that that the reference to thisin the render function (marked with asterisks) is set to windowrather than the MyViewobject, and it's causing an error.

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

I assume I am calling render incorrectly (currently this.render();). How should I be doing this so that the thiscontext is preserved?

我假设我错误地调用了渲染（当前this.render();）。我应该怎么做才能this保留上下文？

回答by ZeissS

Save thisoutside the for loop.

保存this在 for 循环之外。

var that = this;

thisis not transported inside the loop if you use _.each().

this如果您使用_.each().

回答by Skylar Anderson

In Javascript, whenever you enter a new function context, the value of thishas likely changed. All you need to do is store the value of thisbefore you enter the function:

在 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;
},

回答by Sander

this is how we use it here,

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

this way the render is still invoked when initialized.

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

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 );
    }
});

we give the 'el' to the view when we create the view, and the render function inserts html into that element.

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

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

回答by lorefnon

In the context of the anonymous function this refers to the global scope. You need to explicitly preserve this if you wish to use the code in the way you have written. Assuming you have jquery in your page : $.proxy function can be used :

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

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

Alternatively, underscore has a _.bind function which works in a similar way. Also if you define a local variable and assign it to this outside the anonymous function, you can use that in place of this inside the anonymous function.

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

回答by Aaronius

If somecollection is a Backbone.Collection you should be able to say:

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

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

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

The last parameter is the context to be used inside the function.

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