檢視初始化函式
在構造 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>
。