backbone入门示例

最近因为有个项目需要用backbone+mui  所以最近入坑backbone。

Backbonejs有几个重要的概念，先介绍一下:Model，Collection，View，Router。其中Model是根据现实数据建立的抽象，比如人（People）；Collection是Model的一个集合，比如一群人；View是对Model和Collection中数据的展示，把数据渲染（Render）到页面上；Router是对路由的处理，就像传统网站通过url现实不同的页面，在单页面应用（SPA）中通过Router来控制前面说的View的展示。

通过Backbone，你可以把你的数据当作Model，通过Model你可以创建数据，进行数据验证，销毁或者保存到服务器上。当界面上的操作引起model中属性的变化时，model会触发change的事件。那些用来显示model状态的views会接受到model触发change的消息，进而发出对应的响应，并且重新渲染新的数据到界面。在一个完整的Backbone应用中，你不需要写那些胶水代码来从DOM中通过特殊的id来获取节点，或者手工的更新HTML页面，因为在model发生变化时，views会很简单的进行自我更新。

下面是我今天上午写的一个小demo

<button id="check">窃*格瓦拉</button>
<ul id="world-list">

</ul>

<script>
(function($) {
World = Backbone.Model.extend({
name: null
//创建一个world对象，拥有name属性
});
Worlds = Backbone.Collection.extend({
//World对象的集合
initialize: function(models, options) {
this.bind("add", options.view.addOneWorld);
}
});
Worlds = Backbone.Collection.extend({
//Word对象集合
initialize: function(models, options) {
this.bind("add", options.view.addOneWorld)
}
});
AppView = Backbone.View.extend({
el: $("body"),
initialize: function() {
//构造函数，实例化一个World集合类
//并且以字典方式传入AppView的对象
this.worlds = new Worlds(null, {
view: this
})
},
events: {
//事件绑定，绑定Dom中id为check的元素
"click #check": "checkIn",
},
checkIn: function() {
var world_name = prompt("窃?");
if(world_name == "") world_name = '未知';
var world = new World({
name: world_name
});
this.worlds.add(world);
},
addOneWorld: function(model) {
$("#world-list").append("<li>这是 <b>" + model.get('name') + "</b>的：hello world！</li>");
}
});
//实例化appview
var appview = new AppView;
})(jQuery);
</script>

先装逼到这 我去学习Backbonejs Model实践

定义了一个最基础的Model，实现initialize这个初始化方法。这个函数会在Model被实例化时调用。

//直接定义设置默认值
var User = Backbone.Model.extend({
initialize: function() {
alert("Hi ");
},
defaults: {
name: "窃 格瓦拉",
age: "18",
}
});
var user = new User;
alert(user.get("name"))

//赋值定义
var Users = Backbone.Model.extend({
initialize:function(){
alert("窃 尕娃");
}
});

var users=new Users;
users.set({name:"且尕娃啦 "});
alert(users.get("name"));

从这个对象的取值方式可以知道，属性在一个Model是以字典（或者类似字典）的方式存在的，第一种设定默认值的方式，只不过是实现了Backbone的defaults这个方法，或者是给defaults进行了赋值。

var Man = Backbone.Model.extend({
initialize:function(){
alert("latin girl");
},
defaults:{
name:"窃 格瓦拉",
age:"11",
},
aboutMe:function(){
return "我叫" +this.get("name")+"我今年"+this.get("age")
}
});
var man=new Man;
alert(man.aboutMe());

和服务器进行交互

关于服务器的异步操作都是通过Backbone.sync这个方法来完成的，调用这个方法的时候会自动的传递一个参数过去，根据参数向服务器端发送对应的请求。比如你save，backbone会判断你的这个对象是不是新的，如果是新创建的则参数为create，如果是已存在的对象只是进行了改变，那么参数就为update，如果你调用fetch方法，那参数就是read，如果是destory，那么参数就是delete。也就是所谓的CRUD ("create", "read", "update", or "delete")，而这四种参数对应的请求类型为POST，GET，PUT，DELETE。你可以在服务器根据这个request类型，来做出相应的CRUD操作。