認識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" — 全部事件發生都能觸發這個特別的事件，第一個參數是觸發事件的名稱。