Backbone.js为复杂WEB应用程序提供模型(models)、集合(collections)、视图(views)的结构。其中模型用于绑定键值数据和自定义事件；集合附有可枚举函数的丰富API； 视图可以声明事件处理函数，并通过RESRful JSON接口连接到应用程序。
Backbone.Events（事件）
事件绑定on object.on(event, callback, [context]) 别名: bind 在 object 上绑定一个callback回调函数。 只要event触发，该回调函数就会调用。
事件监听
//监听事件
var person = Backbone.Model.extend({
defaults: {
name: 'lbs',
sex: 'man',
age: 10
}
})
var me = new person()
监听-默认属性
// 监听-默认属性
me.on('change',function(){
console.log( '对象默认属性的值改变了' )
})
me.set({name:'ccx'})
监听-指定属性
// 监听-指定属性
me.on('change:age',function(model,value){
console.log( '年龄改变了,现在是'+ value )
})
me.set({age:20})
监听- 修改前的属性值
// 监听- 修改前的属性值 1
me.on('change:sex',function(model,value){
var oldsex = model.previous('sex');
console.log( '性别改变了,以前是'+ oldsex +' 现在是'+ value )
})
me.set({sex: 'woman'}) // 监听- 修改前的属性值 2
me.on('change:age',function(model,value){
var attrs = model.previousAttributes();
var oldage = attrs.age;
if(oldage < value){
console.log( '年龄增加了! ' + '以前是'+ oldage +' 现在是'+ value)
}else if(oldage > value){
console.log( '年龄减少了! ' + '以前是'+ oldage +' 现在是'+ value)
}
})
me.set({age: 50})
me.set({age: 6})
监听- 多个事件 属性
// 监听- 多个事件 属性
me.on('change:age change:sex change:name',function(model,value){
var attrs = model.previousAttributes(); var oldage = attrs.age;
var oldsex = attrs.sex;
var oldname = attrs.name; var newage = model.get('age');
var newsex = model.get('sex');
var newname = model.get('name'); if( oldage !== newage ){
console.log( '年龄改变了! ' + '以前是'+ oldage +' 现在是'+ newage)
}
if( oldsex !== newsex ){
console.log( '性别改变了! ' + '以前是'+ oldsex +' 现在是'+ newsex)
}
if( oldname !== newname ){
console.log( '姓名改变了! ' + '以前是'+ oldname +' 现在是'+ newname)
} })
me.set({age: 100})
me.set({sex: 'boy'})
me.set({name: 'rmb'}) // 监听- 多个事件 属性 2
var name_change = function(model,value){
var oldname = model.previous('name');
var newname = model.get('name');
if( oldname !== newname ){
console.log( '姓名改变了! ' + '以前是'+ oldname +' 现在是'+ newname)
}
},
age_change = function(model,value){
var oldage = model.previous('age');
var newage = model.get('age');
if( oldage !== newage ){
console.log( '年龄改变了! ' + '以前是'+ oldage +' 现在是'+ newage)
}
},
sex_change = function(model,value){
var oldsex = model.previous('sex');
var newsex = model.get('sex');
if( oldsex !== newsex ){
console.log( '性别改变了! ' + '以前是'+ oldsex +' 现在是'+ newsex)
}
},
events = {
'change:name': name_change,
'change:age': age_change,
'change:sex': sex_change
};
me.on(events);
me.set({name:'ccx', age:50, sex:'woman'})
事件绑定once object.once(event, callback, [context]) 用法跟on很像，区别在于绑定的回调函数触发一次后就会被移除。
var person = Backbone.Model.extend({
defaults: {
name: 'lbs',
sex: 'man',
age: 10
}
})
var me = new person()
var num = 0
me.once('change',function(){
console.log( '事件触发次数为：'+ ++num )
})
me.set({name: 'ccx'}) // 事件触发次数为：1
me.set({sex: 'woman'})
触发事件trigger object.trigger(event, [*args]) 触发给定 event或用空格隔开的事件的回调函数。后续传入 trigger 的参数会传递到触发事件的回调函数里。
var person = Backbone.Model.extend({
defaults: {
name: 'lbs',
sex: 'man',
age: 10
}
})
var me = new person()
me.on('changeage',function(){
console.log( '手动触发自定义事件')
})
me.on('change:age',function(model,value){
if(value !== undefined){
console.log('自动触发系统事件,现在的年龄为 '+ value)
}else{
console.log('手动触发系统事件')
}
})
me.trigger('changeage') //手动触发自定义事件
me.trigger('change:age') //手动触发系统事件
me.set({age: 150}) //自动触发系统事件,现在的年龄为 150
移除事件off object.off([event], [callback], [context])别名: unbind 从 object 对象移除先前绑定的 callback 函数。如果没有指定context（上下文），所有上下文下的这个回调函数将被移除。如果没有指定callback，所有绑定这个事件回调函数将被移除；如果没有指定event，所有事件的回调函数会被移除。
// Removes just the `onChange` callback.
object.off("change", onChange); // Removes all "change" callbacks.
object.off("change"); // Removes the `onChange` callback for all events.
object.off(null, onChange); // Removes all callbacks for `context` for all events.
object.off(null, null, context); // Removes all callbacks on `object`.
object.off();
事件监听listenTo object.listenTo(other, event, callback) 让 object 监听 另一个（other）对象上的一个特定事件。不使用other.on(event, callback, object)，而使用这种形式的优点是：listenTo允许 object来跟踪这个特定事件，并且以后可以一次性全部移除它们。callback总是在object上下文环境中被调用。
view.listenTo(model, 'change', view.render);
等价于
model.on('change',view.render,view) var person = Backbone.Model.extend({
defaults: {
name: 'lbs',
sex: 'man',
age: 10
}
})
var me = new person()
var ta = _.extend({}, Backbone.Events)
ta.listenTo(me,'change:age',function(model,value){
var oldage = model.previous('age');
console.log( '年龄改变了,以前是'+ oldage +' 现在是'+ value )
})
me.set({'age':80}) //年龄改变了,以前是10 现在是80
listenToOnce object.listenToOnce(other, event, callback) 用法跟 listenTo 类似，但是事件触发一次后callback将被移除。
停止监听事件stopListening object.stopListening([other], [event], [callback]) 让 object 停止监听事件。如果调用不带参数的stopListening，可以移除 object 下所有已经registered(注册)的callback函数...，或者只删除指定对象上明确告知的监听事件，或者一个删除指定事件，或者只删除指定的回调函数。
view.stopListening();
view.stopListening(model);
view.stopListening(model,'change');
view.stopListening(model,'change',view.render);
特殊事件all
var person = Backbone.Model.extend({
defaults: {
name: 'lbs',
sex: 'man',
age: 10
}
})
var me = new person()
me.on('change:age',function(){
console.log( '触发了change:age事件')
})
me.on('change:name',function(){
console.log('触发了change:name事件')
})
me.on('all', function (value) {
console.log('触发了all事件中' + value)
})
me.set('name','ccx')
me.set('age', 50)
//me.trigger('all')
Backbone 内置事件列表
Backbone内置事件的完整列表，带有参数，可以在Models（模型），Collection（集合），Views（视图）上*地触发这些事件。
一般来说，事件触发（例如 model.set，collection.add 或者其他事件）后就会执行回调函数，但是如果想阻止回调函数的执行，可以传递 {silent: true} 作为参数。
"add" (model, collection, options) — 当一个model（模型）被添加到一个collection（集合）时触发。
"remove" (model, collection, options) — 当一个model（模型）从一个collection（集合）中被删除时触发。
"reset" (collection, options) — 当该collection（集合）的全部内容已被替换时触发。
"sort" (collection, options) — 当该collection（集合）已被重新排序时触发。
"change" (model, options) — 当一个model（模型）的属性改变时触发。
"change:[attribute]" (model, value, options) — 当一个model（模型）的某个特定属性被更新时触发。
"destroy" (model, collection, options) —当一个model（模型）被destroyed（销毁）时触发。
"request" (model_or_collection, xhr, options) — 当一个model（模型）或collection（集合）开始发送请求到服务器时触发。
"sync" (model_or_collection, resp, options) — 当一个model（模型）或collection（集合）成功同步到服务器时触发。
"error" (model_or_collection, resp, options) — 当一个model（模型）或collection（集合）的请求远程服务器失败时触发。
"invalid" (model, error, options) — 当model（模型）在客户端 validation（验证）失败时触发。
"route:[name]" (params) — 当一个特定route（路由）相匹配时通过路由器触发。
"route" (route, params) — 当任何一个route（路由）相匹配时通过路由器触发。
"route" (router, route, params) — 当任何一个route（路由）相匹配时通过history（历史记录）触发。
"all" — 所有事件发生都能触发这个特别的事件，第一个参数是触发事件的名称。