backbone学习笔记0

Backbone核心模块：model/view/Collection/router

• model 负责数据&逻辑
• view 负责视图表现
• collection 作为一个model集合
• router负责路由切换

Model

• 初始化 initialize
• 默认值 defaults
• 校验 validate仅默认在save时执行，若想set也执行校验需要添加{validate:true};
• 和服务器交互 url save fetch

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不能为空";
}
}
})

collection

可以理解为model集合

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'
})

Router

页面加载期间，当应用创建了所有的路由，需要调用Backbone.history.start()或者Backbone.history.start({pushState:true})来确保初始化路由；

route匹配原则:(/可以匹配#和标准url(/))

• *，匹配所有 //*actions
• ：匹配参数 // /post/:id

  "post" :"post                       //#post
  "post/:id":"save"                    //#post/:id
  "post/12/:page" :"pageChange"       //#post/12/12

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

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'}) //初始化时自动渲染