Backbone學習日記第一集——hello backbone

時間 2019-11-09

標籤 backbone 學習日記一集 hello 简体版

原文原文鏈接

因爲工做項目的須要用到backbone.js這個MVC框架，因此前段時間一直在網上收集了很久資料，可是都沒什麼好一點的，偶然間發現了www.the5fire.com網站上有backbone全套的教程，因而又當回剁手族買了本電子書，可是諸多緣由一直沒怎麼看，今天在公交車上無聊，翻了翻手機忽然想起來了這本書，在車上看了2個章節，還不錯，有激起了我對他的學習慾望，回到家就火燒眉毛的收拾完家務，開始code。javascript

下面是我今天晚上照着例子寫了一個hello Backbone的Demohtml

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <button id="check">新手報到</button>
 9     <ul id="world-list"></ul>
10 
11 <script type="text/javascript" src="Scripts/jquery-1.11.1.js"></script>
12 <script type="text/javascript" src="Scripts/underscore.js"></script>
13 <script type="text/javascript" src="Scripts/backbone.js"></script>
14 <script>
15     (function($){
16         World=Backbone.Model.extend({
17             name:null  //建立一個World對象，擁有name屬性
18         });
19 
20         Worlds=Backbone.Collection.extend({
21             //World對象的集合
22             initialize:function(models,options){
23                 this.bind('add',
24                 options.view.addOneWorld
25                 );
26             }
27         });
28 
29         AppView=Backbone.View.extend({
30             el:$('body'),
31             initialize:function(){
32                 this.worlds=new Worlds(null,{//構造函數，實例化一個Worlds的集合類，而且以字典的方式傳入AppView對象
33                     view:this
34                 });
35             },
36             events:{
37                 'click #check':'checkIn'//事件綁定，綁定Dom中id爲check的元素
38             },
39             checkIn:function(){
40                 var world_name=prompt("請問你來自哪一個世界");
41                 if(world_name==''){
42                     world_name='未知'
43                 }
44                 var world=new World({name:world_name});
45                 this.worlds.add(world);
46             },
47             addOneWorld:function(model){
48                 $('#world-list').append('<li>這裏是來自<b>' +
49                         model.get('name') +
50                 '</b>的問候：hello Backbone！</li>')
51             }
52         });
53         var appView=new AppView;
54     })(jQuery)
55 </script>
56 </body>
57 </html>

Backbone是一套很出色的MVC框架，Model表明數據模型，Collection是一個模型的集合，View是用來處理頁面以及簡單頁面邏輯的。java

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。