Backbone入门（Model Collection）

               

 Backbone 是一个前端 JS 代码 MVC 框架，被著名的 37signals 用来构建他们的移动客户端。它不可取代 Jquery，不可取代现有的 template 库。而是和这些结合起来构建复杂的 web 前端交互应用。

 如果项目涉及大量的 javascript 代码，实现很多复杂的前端交互功能，首先你会想到把数据和展示分离。使用 Jquery 的 selector 和 callback 可以轻松做到这点。但是对于富客户端的WEB应用大量代码的结构化组织非常必要。

Backbone 就提供了 javascript 代码的组织的功能。Backbone 主要包括 models, collections, views 和 events, controller 。

Backbone官方网站： http://backbonejs.org/

Model（模型）

Models 用来创建数据，校验数据，存储数据到服务器端。Models 还可以绑定事件。比如用户动作变化触发 models 的 change 事件，所有展示此model 数据的 views 都会接收到 这个 change 事件，进行重绘。

最简单的定义如下：

1. var Game = Backbone.Model.extend({});  

稍微发杂一点

1. var Game = Backbone.Model.extend({  
2.         initialize: function(){  
3.             alert("Oh hey! ");  
4.         },  
5.           defaults: {  
6.             name: 'Default title',  
7.             releaseDate: 2011,  
8.         }  
9.     });  

initialize 相当于构造方法，初始化时调用

简单实用：

1. // Create a new game  
2. var portal = new Game({ name: "Portal 2", releaseDate: 2011});  
3.   
4. // release will hold the releaseDate value -- 2011 here  
5. var release = portal.get('releaseDate');  
6.   
7. // Changes the name attribute  
8. portal.set({ name: "Portal 2 by Valve"});  

此时数据还都在内存中，需要执行save方法才会提交到服务器。（还未理解）

1. portal.save();  

Collection（集合）

实际上，相当于Model的集合。定义方法如下：

1. var GamesCollection = Backbone.Collection.extend({  
2.   model : Game,  
3.   }  
4. });  

需要注意的是，定义Collection的时候，一定要指定Model。 下面让我们为这个集合添加一个方法，如下：

1. var GamesCollection = Backbone.Collection.extend({  
2.   model : Game,  
3.   old : function() {  
4.     return this.filter(function(game) {  
5.       return game.get('releaseDate') < 2009;  
6.     });  
7.   }  
8.   }  
9. });  

集合的使用方法如下：

1. var games = new GamesCollection  
2. games.get(0);  

当然，也可以动态构成集合，如下：

1. var GamesCollection = Backbone.Collection.extend({  
2.   model : Game,  
3.   url: '/games'  
4.   }  
5. });  
6.   
7. var games = new GamesCollection  
8. games.fetch();  

这边的url告诉collection到哪去获取数据，fetch方法会发出一个异步请求到服务器，从而获取数据构成集合。（fetch实际上就是调用jquery的ajax方法）

参考： http://net.tutsplus.com/tutorials/javascript-ajax/getting-started-with-backbone-js/