由于工作项目的需要用到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是用来处理页面以及简单页面逻辑的。