|
|
2016年4月4日
这部分介绍如何分视图显示前面讲的表格内容，Backbone中视图可以嵌套显示，例如前面例子中整个页面可以用一个视图来渲染，table表格可以用一个视图来渲染，表格中的一行可以用一个视图来渲染，这样就用三层视图，只要在以前的例子上稍作修改就可以实现这效果。
首先定义最里层的视图，表格中的行。通过tagName成员变量指定该视图对应的html元素，render方法中指定tr元素中显示的内容。当然也可以指定成员变量className的值，来指定tr元素显示的式样。
var StudentView = Backbone.View.extend({
tagName: 'tr',
render: function() {
$(this.el).html(_.map([
this.model.get('id'),
this.model.get('name'),
this.model.get('age')
],function(val, key){
return '<td>' + val + '</td>';
}))
return this;
}
})
其次显示表格的视图。
var StudnetCollectionView = Backbone.View.extend({
tagName: 'table',
render: function() {
$(this.el).empty();
$(this.el).append($('<tr></tr>')).html(_.map([
'学号','姓名','年龄'
],function(val, key){
return '<th>' + val + '</th>';
}));
$(this.el).append(_.map(this.collection.models,
function(model, key){
return new StudentView({
model: model
}).render().el;
}));
return this;
}
});
最后显示整个页面的视图。
var StudnetPageView = Backbone.View.extend({
render: function() {
$(this.el).html(new StudnetCollectionView({
collection: this.collection
}).render().el);
}
})
同时修改一下显示部分的代码。
var studentPageView = new StudnetPageView({
collection: studentCollection,
el: 'body'
});
studentPageView.render();
整个main.js的代码如下：
(function($){
$(document).ready(function(){
var student1 = new Student({
id: 10000,
name: '王小二',
age: 30
});
var student2 = new Student({
id: 20000,
name: '姚敏',
age: 26
});
var student3 = new Student({
id: 30000,
name: '科比',
age: 24
});
var studentCollection = new StudentCollection([
student1,
student2,
student3
]);
var studentPageView = new StudnetPageView({
collection: studentCollection,
el: 'body'
});
studentPageView.render();
});
//set model
var Student = Backbone.Model.extend({
//set default values.
defaults: {
id: 0,
name: '',
age: 0
}
});
var StudentCollection = Backbone.Collection.extend({
model: Student
});
var StudentView = Backbone.View.extend({
tagName: 'tr',
render: function() {
$(this.el).html(_.map([
this.model.get('id'),
this.model.get('name'),
this.model.get('age')
],function(val, key){
return '<td>' + val + '</td>';
}))
return this;
}
})
//set view
var StudnetCollectionView = Backbone.View.extend({
tagName: 'table',
render: function() {
$(this.el).empty();
$(this.el).append($('<tr></tr>')).html(_.map([
'学号','姓名','年龄'
],function(val, key){
return '<th>' + val + '</th>';
}));
$(this.el).append(_.map(this.collection.models,
function(model, key){
return new StudentView({
model: model
}).render().el;
}));
return this;
}
});
var StudnetPageView = Backbone.View.extend({
render: function() {
$(this.el).html(new StudnetCollectionView({
collection: this.collection
}).render().el);
}
})
})(jQuery);
|