Posted on 2016-04-02 12:06
笑看人生 閱讀(852)
評論(0) 編輯 收藏
@import url(http://www.aygfsteel.com/CuteSoft_Client/CuteEditor/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/css/cuteeditor.css);
在學習筆記一中，一個視圖渲染一個Sudent對象，如果存在多個Student對象怎么辦，
在java中可以通過ArrayList來保存，比如List<Student> students = new ArrayList<>();
在Backbone中，也有類似于ArrayList的實現，只需要新建一個類，繼承Collection就可以了，實現代碼如下：
成員變量model指定集合中存放對象的類型，類似于java中范型。
1 var StudentCollection = Backbone.Collection.extend({
2 model: Student
3 });
對學習筆記一種代碼稍加修改，修改代碼如下：
新建三個Student對象，把這三個對象加入studentCollection對象中。
1 var student1 = new Student({
2 id: 10000,
3 name: '王小二',
4 age: 30
5 });
6
7 var student2 = new Student({
8 id: 20000,
9 name: '姚敏',
10 age: 26
11 });
12
13 var student3 = new Student({
14 id: 30000,
15 name: '科比',
16 age: 24
17 });
18
19 var studentCollection = new StudentCollection([
20 student1,
21 student2,
22 student3
23 ]);
至此集合模型已經新建完畢，那么如何通過視圖來顯示這個集合模型。
學習筆記一中新建的StudentView類的render方法做修改，同時在構建這個類對象時，稍作修改，修改如下：
把原來綁定model的代碼改成綁定collection。
1 var studentCollectionView = new StudnetCollectionView ({
2 collection: studentCollection
3 });
1 var StudnetCollectionView = Backbone.View.extend({
2
3 el: 'body',
4
5 render:function(){
6 var html = '';
7 _.each(this.collection.models,function(model,index,obj){
8 var tmp = '學號: ' + model.get('id') + '.' +
9 '姓名: ' + model.get('name') + '.' +
10 '年齡: ' + model.get('age');
11
12 html = html + '<li>' + tmp + '</li>';
13 });
14
15 html = '<ul>' + html + '</ul>';
16 $(this.el).html(html);
17 }
18 });
完整的main.js內容如下：
1 (function($){
2 $(document).ready(function(){
3
4 var student1 = new Student({
5 id: 10000,
6 name: '王小二',
7 age: 30
8 });
9
10 var student2 = new Student({
11 id: 20000,
12 name: '姚敏',
13 age: 26
14 });
15
16 var student3 = new Student({
17 id: 30000,
18 name: '科比',
19 age: 24
20 });
21
22 var studentCollection = new StudentCollection([
23 student1,
24 student2,
25 student3
26 ]);
27
28 var studentCollectionView = new StudnetCollectionView({
29 collection: studentCollection
30 });
31
32 studentCollectionView.render();
33
34 });
35
36 //set model
37 var Student = Backbone.Model.extend({
38 //set default values.
39 defaults: {
40 id: 0,
41 name: '',
42 age: 0
43 }
44 });
45
46 var StudentCollection = Backbone.Collection.extend({
47 model: Student
48 });
49
50 //set view
51 var StudnetCollectionView = Backbone.View.extend({
52
53 el: 'body',
54
55 render:function(){
56 var html = "<table border='1'><tr><th>學號</th><th>姓名</th><th>年齡</th></tr>";
57 _.each(this.collection.models, function(model,index,obj){
58 var tmp = '<tr><td>' + model.get('id') + '</td>' +
59 '<td>' + model.get('name') + '</td>' +
60 '<td> ' + model.get('age') + '</td></tr>';
61
62
63 html = html = html + tmp;
64 });
65
66 html = html + '</table>';
67 $(this.el).html(html);
68 }
69 });
70
71 })(jQuery);
72