Backbone.js Model 06︰Sample

1.目標:
希望view監聽model的id變化,當id改變時,model抓取新的資料
依照資料做view外觀的改變

2.原作法：
監聽model上id變化,view跟著改變

model.set('id',xxx)
model.fetch()
model.on('change:id',this.doSomething)

3.問題:
當model id改變時,view馬上就收到通知
但此時,資料不見得已經fetch完成,可能出錯

4.解法:
在model內部監聽自己id變化,當id改變時
在model內加入isLoading的屬性=true
在fetch結束後,改變isLoading的屬性=false
view不再監聽model的id,改為監聽model的
isLoading

window.MyModel=Backbone.Model.extend({
    url:'js/data.json',
    initialize:function(){
        _.bindAll(this,'itemChange');
        this.on('change:id',this.itemChange);        
    },
    itemChange:function(){
        var that=this;
        this.set('isLoading',true);            
        this.fetch({
            success:function(response,model){                
                that.set('isLoading',false);
            }
        })
    }        
})
window.MyView=Backbone.View.extend({    
    initialize:function(){
        _.bindAll(this,'statusChange');
        this.model.on('change:isLoading',this.statusChange);
    },
    statusChange:function(){
        console.log('loading status='+this.model.get('isLoading'))    ;
    }    
})
window.model=new MyModel();
window.view=new MyView({
    model:window.model
})
model.set('id',1);