<p><a >上一篇介紹了Backbone集合</a>，本篇將介紹Backbone視圖厅各。</p>
<p>Backbone視圖可以使用JavaScript模板队塘，根據(jù)模型數(shù)據(jù)的邏輯處理向用戶展示相應(yīng)的界面宜鸯×苄洌可以監(jiān)聽模型的change事件，并在回調(diào)函數(shù)綁定視圖的render()方法陌凳，就可以在不重繪整個頁面的情況下冯遂，更新視圖谒获。</p>
<h2>創(chuàng)建視圖</h2>
<p>可以通過擴(kuò)展Backbone.View對象創(chuàng)建一個視圖：</p>
var app = app || {};
app.MenuListView = Backbone.View.extend({
tagName: 'ul',
className: 'menu-list',
template: function() {
return _.template('<li><%= title %></li>');
},
render: function() {
this.$el.html(this.template()({title: "Menu List"}));
return this;
},
initialize: function() {
this.render();
$('body').append(this.$el);
}
});
app.menulist = new app.MenuListView();
console.log(app.menulist.el);
console.log(app.menulist.$el);
<p>打印值如下：</p>
<p>app.menulist.el:</p>
<p>
</p>
<p>app.menulist.$el:</p>
<p>
</p>
<h2>初始化</h2>
<p>如果視圖定義了initialize()初始化函數(shù)，在創(chuàng)建視圖時赔硫，它將立即被調(diào)用盐肃。</p>
<h3>視圖與模型</h3>
<p>創(chuàng)建視圖時砸王，可以通過傳入model或collection屬性和值，將某一模型或集合直接注冊到視圖中：</p>
var app = app || {};
app.MenuModel = Backbone.Model.extend({
defaults: {
title: 'this is a menu',
status: 'inactive'
}
});
app.MenuCollection = Backbone.Collection.extend({
model: app.MenuModel,
initialize: function() {
console.log('集合初始化成功');
}
});
var menus = [
{
id: 1,
name: '最近會話',
status: 'active'
},
{
id: 2,
name: '通訊錄',
status: 'inactive'
}
]
app.menus = new app.MenuCollection(menus);
app.MenuListView = Backbone.View.extend({
tagName: 'ul',
className: 'menu-list',
template: function() {
return _.template('<li><%= title %></li>');
},
render: function() {
this.$el.html(this.template()({title: "Menu List"}));
return this;
},
initialize: function() {
//console.log('視圖初始化');
this.render();
$('body').append(this.$el);
}
});
app.menulist = new app.MenuListView({
collection: app.menus
});
console.log(app.menulist.collection);
<p>打印如下：</p>
<p>
</p>
<h2>視圖與DOM</h2>
<p>我們希望通過使用Backbone視圖生成頁面文檔，將頁面展示給用戶瘪菌，就必須將視圖與DOM關(guān)聯(lián)起來嘹朗，通過操作視圖改變DOM屹培。</p>
<ul>
<li><p>Backbone提供兩種方式關(guān)聯(lián)視圖和DOM:</p>
<ul>
<li><p>創(chuàng)建</p>
<p>創(chuàng)建視圖時創(chuàng)建一個新元素，然后將該元素插入至DOM壁顶。</p></li>
<li><p>引用</p>
<p>視圖直接引用頁面已經(jīng)存在的元素若专。</p></li>
</ul></li>
<li><p>創(chuàng)建</p>
<p>Backbone視圖創(chuàng)建元素時只需要使用tagName蝴猪、id、className屬性嚎莉。此Backbone視圖對象的el屬性是一個指向該元素的引用。</p>
<p><em>tagName默認(rèn)值為div赃额。</em></p>
app.MenuListView = Backbone.View.extend({
tagName: 'ul', //元素標(biāo)簽類型跳芳，必選飞盆，未設(shè)置時默認(rèn)為div
className: 'menu-list', //元素class次乓，可選
id: 'menus', //元素id票腰，可選
initialize: function() {
$('body').append(this.$el);
}
});
app.menulist = new app.MenuListView();
console.log(app.menulist.el);
//logs: <ul id="menus" class="menu-list"></ul>
<p><em>注：此時Backbone視圖生成的元素并沒有插入到文檔DOM杏慰。</em></p></li>
<li><p>引用</p>
<p>可以為Backbone視圖對象傳入一個el屬性，來匹配頁面文檔已存在的元素鹃愤。</p>
app.MenuListView = Backbone.View.extend({
el: 'body', //值為CSS選擇器
initialize: function() {
}
});
app.menulist = new app.MenuListView();
console.log(app.menulist.el);
//logs: <body>...</body>
<p>我們也可以在創(chuàng)建視圖時软吐，為對象el屬性設(shè)置值：</p>
app.menulist = new app.MenuListView({el: 'body'});
<p><em>el屬性值為CSS選擇器凹耙，Backbone視圖對象將根據(jù)此選擇器匹配頁面元素肖抱。</em></p></li>
</ul>
<h2>視圖屬性與方法</h2>
<p>要深入理解Backbone視圖异旧，必須理解視圖一些重要的屬性和方法。</p>
<ul>
<li><p>el</p>
<p>el是視圖的一個核心屬性拌屏，也是使用視圖對象時必然會用到的一個屬性术荤。</p>
<blockquote>
<p>el是DOM元素的一個引用瓣戚，所有視圖都有其el屬性。視圖可以通過使用el構(gòu)成它的元素內(nèi)容舱权，在觸發(fā)瀏覽器最少次數(shù)重排和重繪的情況下刚照，將所有內(nèi)容一次性插入文檔DOM无畔。</p>
</blockquote></li>
<li><p>$el吠冤、$()</p>
<p>對視圖和DOM操作拯辙，經(jīng)常要用到j(luò)Query函數(shù)涯保，Backbone通過為視圖定義$el屬性和$()函數(shù)，為我們操作視圖和DOM提供了很多便利未荒。視圖的$el屬性等價于$(View.el)片排，$(selector)等價于$(View.el).find(selector)速侈。</p></li>
<li><p>setElement()</p>
<p>Backbone提供setElement()方法倚搬，支持將現(xiàn)有Backbone視圖應(yīng)用于不同的DOM元素比默，調(diào)用該方法將創(chuàng)建一個緩存$el引用，并且將視圖委托事件從舊元素移動到新元素乙各。</p>
var MyView = Backbone.View.extend({
events: {
click: function(e) {
console.log(myView.$el.html());
}
}
});
var btn1 = $('<button>button 1</button>');
var btn2 = $('<button>button 2</button>');
//視圖元素el是btn1
var myView = new MyView({el: btn1});
btn1.trigger('click'); //logs: button 1
//視圖元素el指向btn2
myView.setElement(btn2);
btn1.trigger('click');
btn2.trigger('click'); //logs: button 2
console.log(myView.$el.html);// button 2
</li>
</ul>
<h2>渲染模板-render()</h2>
<p>render()函數(shù)是一個可選函數(shù)，需要我們主動調(diào)用沛善，通常我們在里面實現(xiàn)根據(jù)模型屬性渲染視圖模板塞祈，生成HTML標(biāo)記议薪；然后使用el或$el屬性，將這些HTML標(biāo)記設(shè)置為視圖的el屬性所引用的 DOM元素的HTML內(nèi)容产捞。</p>
app.MenuModel = Backbone.Model.extend({
defaults: {
title: 'this is a menu',
status: 'inactive'
}
});
app.MenuCollection = Backbone.Collection.extend({
model: app.MenuModel,
initialize: function() {
console.log('集合初始化成功');
this.on('reset', function(cols, options) {
console.log('重置集合');
}, this);
this.on('add', function(model) {
console.log('添加模型坯临，cid： ' + model.cid);
});
this.on('change', function(model) {
console.log('模型屬性改變?yōu)? ' + model.get('name'), model);
});
this.on('change:name', function(model) {
console.log('模型name屬性改變?yōu)? ' + model.get('name'));
});
this.on('remove', function(model) {
console.log('移除模型: ' + model.cid);
});
}
});
var menus = [
{
id: 1,
name: '最近會話',
status: 'active'
},
{
id: 2,
name: '通訊錄',
status: 'inactive'
}
]
app.menus = new app.MenuCollection(menus);
app.MenuItemView = Backbone.View.extend({
tagName: 'li',
className: 'menu-item',
template: function() {
return _.template('<a title="<%= title %>"><%= name %></a>');
},
render: function() {
this.$el.html(this.template()(this.model.toJSON()));
return this;
}
});
app.MenuListView = Backbone.View.extend({
tagName: 'ul',
className: 'menu-list',
template: function() {
return _.template('');
},
render: function() {
//遍歷集合看靠，集合中每個模型對應(yīng)一個菜單項
_.each(this.collection.models, function(model) {
//為每個集合模型衷笋，創(chuàng)建一個新菜單項視圖實例
var menuItemView = new app.MenuItemView({model: model});
//在父視圖-菜單列表視圖中添加子菜單-菜單項視圖
this.$el.append(menuItemView.render().el);
}, this);
console.log(this.el);
return this;
},
initialize: function() {
this.render();
$('body').append(this.$el);
}
});
app.menulistview = new app.MenuListView({
collection: app.menus
});
<p>控制臺打印值如下：
</p>
<p>頁面效果如圖：
</p>
<p><em>我們通常在render()函數(shù)底部返回this以開啟鏈?zhǔn)秸{(diào)用，該視圖可以在其他父視圖里被重用泊脐。</em></p>
<h2>Events對象</h2>
<p>Backbone提供events對象支持我們通過設(shè)置在el下的自定義CSS選擇器容客、事件類型和事件監(jiān)聽器，為DOM元素綁定事件缩挑。</p>
app.MenuItemView = Backbone.View.extend({
tagName: 'li',
className: 'menu-item',
events: {
'click .menu': 'openMenu',
'dblclick .menu': 'edit'
},
template: function() {
return _.template('<a class="menu" title="<%= title %>"><%= name %></a>');
},
render: function() {
this.$el.html(this.template()(this.model.toJSON()));
return this;
},
initialize: function() {
this.dbltimer = null;
},
openMenu: function(e) {
if (this.dbltimer) {
clearTimeout(this.dbltimer);
this.dbltimer = null;
}
this.dbltimer = setTimeout(function(){
console.log('opened');
},300);
},
edit: function(e) {
if (this.dbltimer) {
clearTimeout(this.dbltimer);
this.dbltimer = null;
}
console.log('edit');
}
});
app.MenuListView = Backbone.View.extend({
tagName: 'ul',
className: 'menu-list',
template: function() {
return _.template('');
},
render: function() {
_.each(this.collection.models, function(model) {
var menuItemView = new app.MenuItemView({model: model});
this.$el.append(menuItemView.render().el);
}, this);
// this.$el.html(this.template()({title: "Menu List"}));
console.log(this.el);
return this;
},
initialize: function() {
this.render();
$('body').append(this.$el);
}
});
app.menulistview = new app.MenuListView({
collection: app.menus
});
<p><em>若沒有設(shè)置CSS選擇器，則默認(rèn)為el所引用DOM元素綁定事件芥丧。</em></p>
<h2>移除視圖-remove()</h2>
<p>調(diào)用View.remove()擅耽，從DOM中移除一個視圖乖仇。同時將調(diào)用stopListening來移除通過 listenTo綁定在視圖上的所有事件。</p>
app.menulistview.remove();
<p>以上是對Backbone視圖的回顧與總結(jié)询兴，下一篇將介紹<a >Backbone事件</a>乃沙。</p>
