<p><a href="http://blog.codingplayboy.com/?p=227">上一篇介绍了Backbone集合</a>，本篇将介绍Backbone视图。</p>
<p>Backbone视图可以使用JavaScript模板，根据模型数据的逻辑处理向用户展示相应的界面。可以监听模型的change事件，并在回调函数绑定视图的render()方法，就可以在不重绘整个页面的情况下，更新视图。</p>
<h2>创建视图</h2>
<p>可以通过扩展Backbone.View对象创建一个视图：</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>
app.menulist.el
</p>
<p>app.menulist.$el:</p>
<p>
app.menulist.$el
</p>
<h2>初始化</h2>
<p>如果视图定义了initialize()初始化函数，在创建视图时，它将立即被调用。</p>
<h3>视图与模型</h3>
<p>创建视图时，可以通过传入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>
app.menulist.collection
</p>
<h2>视图与DOM</h2>
<p>我们希望通过使用Backbone视图生成页面文档，将页面展示给用户，就必须将视图与DOM关联起来，通过操作视图改变DOM。</p>
<ul>
<li><p>Backbone提供两种方式关联视图和DOM:</p>
<ul>
<li><p>创建</p>
<p>创建视图时创建一个新元素，然后将该元素插入至DOM。</p></li>
<li><p>引用</p>
<p>视图直接引用页面已经存在的元素。</p></li>
</ul></li>
<li><p>创建</p>
<p>Backbone视图创建元素时只需要使用tagName、id、className属性。此Backbone视图对象的el属性是一个指向该元素的引用。</p>
<p><em>tagName默认值为div。</em></p>
app.MenuListView = Backbone.View.extend({
tagName: 'ul', //元素标签类型，必选，未设置时默认为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>我们也可以在创建视图时，为对象el属性设置值：</p>
app.menulist = new app.MenuListView({el: 'body'});
<p><em>el属性值为CSS选择器，Backbone视图对象将根据此选择器匹配页面元素。</em></p></li>
</ul>
<h2>视图属性与方法</h2>
<p>要深入理解Backbone视图，必须理解视图一些重要的属性和方法。</p>
<ul>
<li><p>el</p>
<p>el是视图的一个核心属性，也是使用视图对象时必然会用到的一个属性。</p>
<blockquote>
<p>el是DOM元素的一个引用，所有视图都有其el属性。视图可以通过使用el构成它的元素内容，在触发浏览器最少次数重排和重绘的情况下，将所有内容一次性插入文档DOM。</p>
</blockquote></li>
<li><p>$el、$()</p>
<p>对视图和DOM操作，经常要用到jQuery函数，Backbone通过为视图定义$el属性和$()函数，为我们操作视图和DOM提供了很多便利。视图的$el属性等价于$(View.el)，$(selector)等价于$(View.el).find(selector)。</p></li>
<li><p>setElement()</p>
<p>Backbone提供setElement()方法，支持将现有Backbone视图应用于不同的DOM元素，调用该方法将创建一个缓存$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()函数是一个可选函数，需要我们主动调用，通常我们在里面实现根据模型属性渲染视图模板，生成HTML标记；然后使用el或$el属性，将这些HTML标记设置为视图的el属性所引用的 DOM元素的HTML内容。</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('模型属性改变为: ' + model.get('name'), model);
});
this.on('change:name', function(model) {
console.log('模型name属性改变为: ' + 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() {
//遍历集合，集合中每个模型对应一个菜单项
_.each(this.collection.models, function(model) {
//为每个集合模型，创建一个新菜单项视图实例
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>控制台打印值如下：
this.el
</p>
<p>页面效果如图：
页面效果图
</p>
<p><em>我们通常在render()函数底部返回this以开启链式调用，该视图可以在其他父视图里被重用。</em></p>
<h2>Events对象</h2>
<p>Backbone提供events对象支持我们通过设置在el下的自定义CSS选择器、事件类型和事件监听器，为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>若没有设置CSS选择器，则默认为el所引用DOM元素绑定事件。</em></p>
<h2>移除视图-remove()</h2>
<p>调用View.remove()，从DOM中移除一个视图。同时将调用stopListening来移除通过 listenTo绑定在视图上的所有事件。</p>
app.menulistview.remove();
<p>以上是对Backbone视图的回顾与总结，下一篇将介绍<a href="http://blog.codingplayboy.com/?p=258">Backbone事件</a>。</p>
网友评论