认识Backbone (一)

　　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" — 所有事件发生都能触发这个特别的事件，第一个参数是触发事件的名称。

posted @ 2015-08-03 11:02 eyeear 阅读(581) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

认识Backbone (一)

公告