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实践

backbone入门示例

定义了一个最基础的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入门示例

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

上一篇:一步步搭建自己的轻量级MVCphp框架-(四)一个国产轻量级框架Amysql源码分析(3) 总进程对象


下一篇:Python的Django框架完成一个完整的论坛(源码以及思路)