Backbone 及依賴庫

1. underscore
2. zepto/jquery

Backbone 的特性

1. 輕量級
2. MVC結(jié)構(gòu)化
3. 繼承機(jī)制
4. 建立與服務(wù)器的無縫鏈接

• Backbone.sync可定制

5. 界面事件管理

• 事件可以是任意事件
• 元素可以是滿足jquery的選擇器
• 后邊是響應(yīng)方法

6. 輕量級模板解析

• <%=data.id%>

7. 自定義事件管理

• model.on('selfEvent',function(){})
• model.off('selfEvent')
• model.trigger('selfEvent',val1,val2...)

8. 路由器

// 在 view 中
events: {
    'click [role=edit]':'add'
},
add: function () {}
// 在 route 中
var CustomRouter = Backbone.Router.extend({  
    routes : {  
        '' : 'index', // 當(dāng)URL Hash在根目錄時執(zhí)行index方法：url#  
        'list' : 'getList', // 當(dāng)URL Hash在list節(jié)點(diǎn)時執(zhí)行g(shù)etList方法：url#list  
        'detail/:id' : 'query', // 當(dāng)URL Hash在detail節(jié)點(diǎn)時執(zhí)行query方法，并將detail后的數(shù)據(jù)作為參數(shù)傳遞給query方法：url#list/1001  
        '*error' : 'showError' // 當(dāng)URL Hash不匹配以上規(guī)則時, 執(zhí)行error方法  
    },  
    index : function() {  
        alert('index');  
    },  
    getList : function() {  
        alert('getList');  
    },  
    query : function(id) {  
        alert('query id: ' + id);  
    },  
    showError : function(error) {  
        alert('error hash: ' + error);  
    },  
});  
  
var custom = new CustomRouter();  
Backbone.history.start();