Backbone入门(Model,Collection)
原文地址:http://blog.csdn.net/feng88724/article/details/7290338
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 事件,进行重绘。
最简单的定义如下:
var Game = Backbone.Model.extend({});
稍微发杂一点
var Game = Backbone.Model.extend({
initialize: function(){
alert(“Oh hey! “);
},
defaults: {
name: ‘Default title’,
releaseDate: 2011,
}
});
initialize 相当于构造方法,初始化时调用
简单实用:
// Create a new game
var portal = new Game({ name: “Portal 2”, releaseDate: 2011});
// release will hold the releaseDate value – 2011 here
var release = portal.get(‘releaseDate’);
// Changes the name attribute
portal.set({ name: “Portal 2 by Valve”});
此时数据还都在内存中,需要执行save方法才会提交到服务器。(还未理解)
portal.save();
Collection(集合)
实际上,相当于Model的集合。定义方法如下:
var GamesCollection = Backbone.Collection.extend({
model : Game,
}
});
需要注意的是,定义Collection的时候,一定要指定Model。 下面让我们为这个集合添加一个方法,如下:
var GamesCollection = Backbone.Collection.extend({
model : Game,
old : function() {
return this.filter(function(game) {
return game.get(‘releaseDate’) < 2009;
});
}
}
});
集合的使用方法如下:
var games = new GamesCollection
games.get(0);
当然,也可以动态构成集合,如下:
var GamesCollection = Backbone.Collection.extend({
model : Game,
url: ‘/games’
}
});
var games = new GamesCollection
games.fetch();
这边的url告诉collection到哪去获取数据,fetch方法会发出一个异步请求到服务器,从而获取数据构成集合。(fetch实际上就是调用jquery的ajax方法)
参考:http://net.tutsplus.com/tutorials/javascript-ajax/getting-started-with-backbone-js/