檢視初始化函式

在構造 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>