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

 

你可能感兴趣的:(认识Backbone (一))