Backbone核心模塊：model/view/Collection/router
- model 負責數據&邏輯
- view 負責視圖表現
- collection 作為一個model集合
- router負責路由切換
Model
- 初始化 initialize
- 默認值 defaults
- 校驗 validate僅默認在save時執行，若想set也執行校驗需要添加{validate:true};
- 和服務器交互 url save fetch
<pre>
var hello =Backbone.Model.extend({
url:'/man/', //用于CRUD,刪除時需要傳入id,則應該指定urlRoot
initialize:function(){
console.log('初始化操作，首先執行。。');
//監聽name改變狀態
this.on('change:name',function(){
alert('name changed!!!');
}，
//invalid事件傳遞三個參數(model, error, options)
this.on('invalid',function(model,err){
alert(err);
})
}，
defaults:{
name:'jack',
age:18
}，
validate:function(attributes){
if(attributes.name ==''){
return "name不能為空";
}
}
})</pre>
collection
可以理解為model集合
<pre>
var Book=Backbone.Model.extend({ });
var BookShelf =Backbone.Collection.extend({
model:Book,
url:'/books/'
})
BookShelf.fetch({
reset:true//重置集合，重新填充
success:function(collection,res,options){
},error:function(collection,res,options){
}
})
//新建記錄
BookShelf.create({
title:'hahah'
})
</pre>
Router
頁面加載期間，當應用創建了所有的路由，需要調用Backbone.history.start()或者Backbone.history.start({pushState:true})來確保初始化路由；
route匹配原則:(/可以匹配#和標準url(/))
- *，匹配所有 //*actions
- ：匹配參數 // /post/:id
<pre>
"post" :"post //#post
"post/:id":"save" //#post/:id
"post/12/:page" :"pageChange" //#post/12/12
</pre>
<pre>
var AppRouter =Backbone.Router.extend({
routes:{
//匹配所有請求，執行defaultRoute函數
"*actions" :"defaultRoute"
},
defaultRoute:function(actions){
alert(actions)
}
});
var myRouter =new AppRouter;
Backbone.history.start();
myRouter.navigate('/post/',{trigger:true,replace:true});
trigger，返回true觸發事件，返回false只是url變化，不觸發事件
replace ,替換url，history不會記錄變動
View
<pre>
var MyView =Backbone.View.extend({
//引用dom元素，可以顯示聲明（沒顯示聲明會構造一個空div）也可以在構造函數中傳遞，
el:$('#myView'),
initialize:function(){
console.log('it's my view');
}，
render:function(context){
var template =_.template($('#search_template').html());
$(this.el).html(template(context));
}，
events:{
//在el范圍內查找元素，綁定點擊事件，
'click input[type=button]' : 'showName'
} ，
doSearch:function() {
}
})
var myView =new MyView({el:$('#myView')});//構造函數中聲明
myView.render({name:'jack'}) //初始化時自動渲染
</pre>
