视图初始化函数

在构造 View 之后，由 Backbone 调用 initialize 。

可选参数

initialize 函数接收传递给视图构造函数的所有参数。通常，用于传递视图默认选项的选项哈希：

['model', 'collection', 'el', 'id', 'attributes', 'className', 'tagName', 'events']

你可以将任何自定义属性添加到选项哈希和/或自定义参数。

var MyView = Backbone.View.extend({
    initialize: function(options, customParam){
        // ensure that the 'options' is a hash to avoid errors if undefined.
        options = options || {};
        this.customAttribute = options.customAttribute;
        this.customParam = customParam;
    },
});

并构建视图：

var view = new MyView({
    model: new Backbone.Model(),
    template: "<p>a template</p>",
    customAttribute: "our custom attribute"
}, "my custom param");

请注意，所有默认视图选项都会自动添加到视图对象中，因此不必在 initialize 函数中执行此操作。

立即渲染模式

initialize 方法的一个常见模式是调用 render 方法，以便立即呈现任何新构造的 View

此模式仅应用于构造对象应立即将其呈现给 HTML 文档，绑定所有事件侦听器以及执行与在 DOM 中放置内容相关联的所有其他操作的实例。

var MyView = Backbone.View.extend({
    initialize: function() {
        this.render();
    },

    render: function() {
        this.$el.html("<p>I'm running!</p>");
    }
});

然而，应该注意的是，在手动调用 .render 之前（或通过其他方法），不应立即呈现某些视图。

另一个常见的 initialize 模式是向 View 对象添加以后需要的东西：

var MyView = Backbone.View.extend({
    el: "body",
    template: _.template( "<p>This is <%= name %>'s page</p>" ),

    initialize: function(){
        this.name = "Bill";
        
        this.render();
    },

    render: function(){
        var viewTemplateData = {
            name: this.name
        };

        this.$el.html( this.template( viewTemplateData ) );
    }
});

DOM 现在将在 body 中包含 <p>This is Bill's page</p>。