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

转载于:https://www.cnblogs.com/V-JACK/p/5300856.html