<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    posts - 36, comments - 30, trackbacks - 0, articles - 3

    2016年4月2日

    這部分介紹如何分視圖顯示前面講的表格內容,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);

    posted @ 2016-04-04 17:40 笑看人生 閱讀(172) | 評論 (0)編輯 收藏

    @import url(http://m.tkk7.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 


    posted @ 2016-04-02 12:06 笑看人生 閱讀(851) | 評論 (0)編輯 收藏

    項目里用到Backbone+marionet框架,由于以前沒有接觸過這些技術,經過一段時間的學習,覺得這技術還是很強大的,現把
    學習體會總結一下,以便后面查詢。

    Backbone是一個基于MVC模式的前端JavaScript框架,用于前端頁面開發。
    可以從http://backbone.js上下載對應的版本。

    使用Backbone,需要依賴其他一些js庫。
    jQuery  http://jquery.com
    Underscore http://underscorejs.org

    頁面的head元素內容大體如下:
    1 <script src="lib/jquery-2.2.2.js"></script>
    2 <script src="lib/underscore-2.js"></script>
    3 <script src="lib/backbone.js"></script>

    Backbone是一個MVC框架,通過V來展示M的內容,C接受用戶的請求,更新模型,然后刷新V。

    下面以一個例子,來說明怎么建立一個簡單的Backbone應用。

    首先定義一個Model類Student, 需要繼承Backbone.Model,這個類有三個成員變量,id,name,age,套用java中的叫法,其實可能
    不應該這么稱呼。

    1     var Student = Backbone.Model.extend({
    2         //set default values.
    3         defaults: {
    4             id: 0,
    5             name: '',
    6             age: 0
    7         }
    8     });


    然后定義一個View類StudentView,需要繼承Backbone.View, 給這個類的成員變量el賦值 body,指明在頁面的body元素中渲染視圖,
    同時重寫了渲染方法render,指明如何渲染,以下代碼應用jQuery的語法,在el指定的元素內,顯示指定的內容。
    每個視圖綁定一個Model,在View的所有方法中可以直接調用this.model獲取當前View綁定的Model對象,如下例子
    this.model.get('id'),注意獲取model屬性值時,不能直接使用thi.model.id

     1     var StudnetView = Backbone.View.extend({
     2         
     3         el: 'body',
     4         
     5         render:function(){
     6             var html = '學號: ' + this.model.get('id') + '.' +
     7                        '姓名: ' + this.model.get('name') + '.' +
     8                        '年齡: ' + this.model.get('age');
     9     
    10             $(this.el).html(html);
    11         }
    12     });

    定義完模型和視圖類之類,接下來就是創建模型類和視圖類對象,創建方法類似于java中創建對象。
    新建一個model對象student,給對象屬性指定值。
    新建一個view對象,并且指定該view綁定的model對象。
    調用view的渲染方法。

     1     var student = new Student({
     2             id: 10000,
     3             name: '王小二',
     4             age: 30
     5      });
     6         
     7         
     8     var studnetView = new StudnetView({
     9             model: student
    10     });
    11 
    12     studnetView.render();

    至此Backbone的代碼就全部寫完了,只要把這些新建Model和View的代碼放到自定義的js文件中,
    在頁面加載時調用即可,這里自定義js文件名為main.js,內容如下:

     1 (function($){
     2     $(document).ready(function(){
     3         
     4         var student = new Student({
     5             id: 10000,
     6             name: '王小二',
     7             age: 30
     8         });
     9         
    10         
    11         var studnetView = new StudnetView({
    12             model: student
    13         });
    14 
    15         studnetView.render();
    16         
    17     });
    18     
    19     //set model
    20     var Student = Backbone.Model.extend({
    21         //set default values.
    22         defaults: {
    23             id: 0,
    24             name: '',
    25             age: 0
    26         }
    27     });
    28     
    29     //set view
    30     var StudnetView = Backbone.View.extend({
    31         
    32         el: 'body',
    33         
    34         render:function(){
    35             var html = '學號: ' + this.model.id + '.'
    36                        '姓名: ' + this.model.name + '.'
    37                        '年齡: ' + this.model.age;
    38     
    39             $(this.el).html(html);
    40         }
    41     });
    42     
    43 })(jQuery);

    然后再新建一個index.html,內容如下:

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8">
     5         <title>Backbone.js 1</title>
     6         <script src="lib/jquery-2.2.2.js"></script>
     7         <script src="lib/underscore-2.js"></script>
     8         <script src="lib/backbone.js"></script>
     9         <script src="js/main.js"></script>
    10     </head>
    11     <body>
    12         
    13     </body>
    14 </html>

    最后,在瀏覽器中打開這個文件,就可以看到效果了。

    posted @ 2016-04-02 10:06 笑看人生 閱讀(2552) | 評論 (0)編輯 收藏

    主站蜘蛛池模板: 少妇太爽了在线观看免费视频 | 亚洲综合激情另类小说区| 一级做a爱片特黄在线观看免费看| 国产裸模视频免费区无码| 亚洲国产欧美国产综合一区| 毛片免费在线播放| 亚洲国产日韩精品| 日韩高清免费在线观看| 久久亚洲欧美国产精品| 亚洲а∨天堂久久精品| 国产裸体美女永久免费无遮挡| 久久影视国产亚洲| 91精品全国免费观看青青| 亚洲第一精品在线视频| 999国内精品永久免费视频| 99久久亚洲综合精品成人网| 99热在线免费播放| 亚洲综合色丁香婷婷六月图片| 韩国欧洲一级毛片免费| 日本永久免费a∨在线视频| 亚洲国产精品国自产拍AV| 777成影片免费观看| 亚洲一久久久久久久久| 免费v片在线观看品善网| 中文成人久久久久影院免费观看| 久久亚洲精品无码AV红樱桃| 最近中文字幕mv手机免费高清 | 四虎亚洲国产成人久久精品| WWW免费视频在线观看播放 | 亚洲日韩中文字幕一区| 国产jizzjizz视频全部免费| 伊人免费在线观看高清版| 亚洲第一网站免费视频| 亚洲国产成人精品久久久国产成人一区二区三区综 | 曰韩无码AV片免费播放不卡| 亚洲综合日韩久久成人AV| 亚洲一区二区免费视频| 相泽南亚洲一区二区在线播放| 天堂亚洲免费视频| 在线a免费观看最新网站| 色窝窝亚洲AV网在线观看|