Backbone学习日记第一集—

Backbone学习日记第一集——hello backbone

由于工作项目的需要用到backbone.js这个MVC框架，所以前段时间一直在网上收集了好久资料，但是都没什么好一点的，偶然间发现了www.the5fire.com网站上有backbone全套的教程，于是又当回剁手族买了本电子书，但是诸多原因一直没怎么看，今天在公交车上无聊，翻了翻手机突然想起来了这本书，在车上看了2个章节，还不错，有激起了我对他的学习欲望，回到家就迫不及待的收拾完家务，开始code。

下面是我今天晚上照着例子写了一个hello Backbone的Demo

 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是用来处理页面以及简单页面逻辑的。