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