Backbone

Backbone 是一个 JavaScript 框架，可用于创建模型-视图-控制器 (model-view-controller, MVC) 类应用程序和单页界面

事件管理

Backbone.Events 通过继承Events的方法来实现事件的管理 它是Backbone的核心组成的部分

基本事件方法

绑定on方法

使用on方法监听默认事件
使用on方法监听属性事件
使用on方法获取属性修改前的值
使用on方法绑定多个事件

绑定once方法

once()执行一次
trigger 触发事件
off（）移除事件

新增事件方法

监听事件listenTo
监听一次listenToOnce（）
停止监听stopListening

特殊事件的使用

特殊事件all的使用
事件与View Model和Collection的关系

数据模型

Model.extend()可以创建数据模型

1.实例化过程中自动执行initializa函数

var Student=Backbone.Model.extend({
    initialize:function(){
        intnum++;
        console.log("您已经创建了"+intnum+"个对象");
    }
});
var intnum=0;
var stuA=new Student();//实例化过程中自动执行initialize函数
var stuB=new Student();
//您已经创建了2个对象

2.对象模型赋值方法通过defaults设置默认值实例化的对象可以通过obj.set()设置对象属性值

3.可以通过obj.get() obj.escape()获取属性值
4.监听属性值的变化
5.自定义模型中的方法

   var Student=Backbone.Model.extend({
    initialize:function(){
         this.on("change:name",function(model,value){
             // var oldname=this.previous("name");
             var oldname=model.previous("name");
             // var newname1=this.get("name");
                 var newname1=value;
             console.log("旧值是"+oldname+",新值是"+newname1);
         })
    },
    defaults:{
        name:"zhangsan",
        age:"13"
    },
    PrintLog:function(){
        console.log(this.get("name")+this.get("age"));
    }
});
var stu=new Student();
stu.set({
    name:"lisi",
    age:"14"
});
stu.PrintLog();

模型对象操作

读取修改数据
验证关闭验证
在使用set()设置或修改属性必须将validate的属性值设置为true 来通知backbone框架开启验证
调用validate（）方法按照里边的规则对相应数据进行验证（有一处数据不符合规则即为验证失败，设置也会失败），验证失败，触发invalid方法，返回失败的原因显示在浏览器。

    var Teacher=Backbone.Model.extend({
     initialize:function(){
          this.on("invalid",function(model,error){
              console.log(error);
          });
     },
     validate:function(arr){
         if(!_.isString(arr.name)){
             return '姓名不是字符串';
         }
     },
     defaults:{
        "name":"sunbaixin",
        "age":"34",
        "score":"89"
     }
 });
 var tea=new Teacher();
 tea.set({
     name:789,
     age:90
 },{validate:"true"});
  console.log(tea.toJSON());
输出结果：  姓名不是字符串
  Object {name: "sunbaixin", age: "34", score: "89"}

3 更新数据回滚 silent：true
4 删除数据 obj.unset(属性名) obj.clear()没有参数全部清除

对象属性操作

1 调用attributes对象获取所有的属性值

2 调用previous()和previousAttributes()方法返回对象修改前上一个状态的属性值

 var StudentA=Backbone.Model.extend({
     initialize:function(){   
     },
     defaults:{
         name:"zhangsan",
         age:"13"
     }
 });
var stuA=new StudentA();
 stuA.set({
     name:"lisi",
     age:"14"
 });
 var arr=stuA.attributes;
 for(var i in arr){
     console.log(i+":"+arr[i]);
 }//name:lisi age:14
 console.log(stuA.previous("name"));//zhangsan
 console.log(stuA.previousAttributes());//Object {name: "zhangsan", age: "13"}

同步数据到服务器

在Backbone中客户端静态页和服务器上的数据可以通过save fetch destroy等方法对服务器上的数据进行保存获取删除等操作

模型集合

自定义模型集合

 var Student=Backbone.Model.extend({
    defaults:{
        name:"sbx",
        code:"34"
    }
});
var Stus=Backbone.Collection.extend({
    model:Student,
    good:function(){
        return this.filter(function(stu){ return stu.get("code")>78});
    }
})
var stulist=[{
    name:"lidong1",
    code:89
},{
    name:"lidong2",
    code:78
},{
    name:"lidong3",
    code:79
}];
var stu=new Stus(stulist);
var stug=stu.good();
 for(var i=0;i<stug.length;i++){
    console.log(stug[i].toJSON());
}

操作集合中模型对象

添加 add unshift push
删除 pop shift remove
排序 sort

查找

get(id)
通过指定id获取集合中某一个集合对象

at(index) 通过指定索引号获取集合中某一个集合对象

findWhere（attr）查找匹配的属性名称和属性值的第一个集合对象

where（attr，first)

first为true 查找匹配的属性名称和属性值的第一个集合对象

first为false 查找匹配的属性名称和属性值的所有集合对象

var Student=Backbone.Model.extend({
    defaults:{
        name:"sbx",
        code:"34"
    },
    idAttribute:"code"
 };
 var Stus=Backbone.Collection.extend({
    model:Student

 })
var stulist=[{
    name:"lidong1",
    code:89
},{
    name:"lidong3",
    code:78
},{
    name:"lidong3",
    code:79
},{
    name:"lidong4",
    code:79
}];
var newdata=[{
    name:"lidong5",
    code:89
},{
    name:"lidong6",
    code:78
},{
    name:"lidong7",
    code:77
}];
   var stu=new Stus(stulist);
    console.log(stu.get(79).toJSON());
      console.log(stu.at(0).toJSON());
      var find_model1=stu.findWhere({
          code:79
      });
       console.log(find_model1.toJSON());
      var find_model2=stu.where({
          name:"lidong3"
      },false);
      for(var i=0;i<find_model2.length;i++){
          console.log(find_model2[i].toJSON());
      }
      // console.log(stu.shift());
 // console.log(stu.remove(stu.models[0]))
  // console.log(stu.pop());
   // stu.push(newdata[0])

 for(var i=0;i<stu.models.length;i++){
    console.log(stu.models[i].toJSON());
}