|
Posted on 2016-04-04 17:40 笑看人生 阅读(152) 评论(0) 编辑 收藏
这部分介绍如何分视图显示前面讲的表格内容,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);
|