|
|
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);
|