一、简介
当开发涉及到大量JavaScript的web应用的时候,你的第一件事就是学会把数据与界面分开。使用JavaScript创建应用,最终很容易导致应用中存在很多杂乱无章的jQuery选择器以及回调函数,这些函数都是用来维护数据在Html UI,Javascript逻辑以及服务器数据库之间的同步。对于一个富客户端的应用来说,一个更加结构化的方法会更加有益。
Backbone把数据用模型表示(models),模型可以被创建,验证,销毁以及保存到服务器。无论何时一个UI行为导致模型的一个属性被更改,模型将触发一个change事件,所以显示该模型状态的视图(view)将会收到这个change事件并响应,使用新的信息重新渲染他们本身。在一个完全使用Backbone的应用中,你不需要编写辅助代码深入文档DOM中查找某个特定ID对应的元素,然后手动更新他们,当一个模型变化时,视图会简单地更新他们本身。
二、Backbone.Events
Events是一个模块,可以混合在任何对象上,使得对象能够绑定和触发自定义命名的事件。事件在绑定前不需要事先声明,并且可以使用参数传递。比如:
var object = {};
_.extend(object,Backbone.Events);
object.on("alert",function(msg){alert("Triggered "+msg);});
object.trigger("alert","an event");
1、on/bind 为对象绑定事件
语法1:object.on(events,callback,[context])
在对象上定义一个或者多个事件,并绑定事件的回调函数。多个事件使用空格分隔。并且单个事件命名可以使用冒号来标示命名空间,比如:book.on("change:title change:author",...)
语法2:object.on({event1:callback1,event2:callback2,...})
使用一个对象作为参数,如:book.on({
"change:title":titleView.update,
"change:author":authorPane.update
});
特别地,如果绑定在对象上绑定一个"all"事件,那当其他任何事件触发时,该事件也被触发。
2、off/unbind 解除对象上的事件绑定
语法:object.off([event],[callback],[context])
如果context没指定,则移除所有context下的指定事件的指定回调。
如果callback没有指定,则移除指定事件上的所有回调函数。
如果event没有指定,则移动对象上的所有事件。
3、trigger 触发对象上的一个事件
语法:object.trigger(event,[*args])
4、once 绑定一个只能被触发一次的事件
语法:object.once(event,callback,[context])
5、listenTo 监听另一个对象上的某个事件
语法:object.listenTo(other,event,callback),例子:view.listenTo(model,"change",view.render);
6、stopListening 停止监听
语法:object.stopListening([other],[event],[callback])
7、listenToOnce 监听一次
语法:object.listenToOnce(other,event,callback)
三、Backbone.Models
模型是JavaScript应用的核心,他包含了交互数据及大部分的逻辑:转换,验证,计算和访问控制等。你一般使用特定领域的方法来扩展Backbone.Model,Model提供了基本的方法集合来管理model的变化。
1、extend Backbone.Model.extend(properties,[classProperties])
创建自己的Model类,提供类的实例属性和类属性。
2、constructor/initialize new Model([attributes],[options])
当创建一个model对象的时候,传入attributes的初始化值,如果Model定义了initialize函数,在新建一个model后,initialize方法被调用。
3、get
4、set
5、escape
6、has
7、unset
8、clear
9、id
10、idAttribute
11、cid
12、attributes
13、changed
14、defaults
15、toJSON
16、sync
17、fetch
18、save
19、destroy
20、Underscore Methods(6)
21、validate
22、validationError
23、isValid
24、url
25、urlRoot
26、parse
27、clone
28、isNew
29、hasChanged
30、changeAttributes
31、previous
32、previousAttributes