BackbOne移动端框架学习（2）：backbone中的Model

声明：本人摘抄自 the_fire ，多谢这位大神提供的学习资料。

前言：

　　关于backbone，最基础的是 Model，是整个框架的底层，数据对象的模型，并且应该是和后端的Model有相同的属性。

1，最简单的一个对象

        Man_new = Backbone.Model.extend({
            initialize:function(){
                alert("hi world");
            }
        })

        var man = new Man_new(); // hi world

　　上个代码的意思是：定义一个模型类，并创建这个模型类的一个实例，初始化模型对象。

　　要创建自己的 模型 类，你可以扩展 Backbone.Model ，extend方法可以正确的设置原型链，因此通过 extend创建的子类也可以被深度

扩展。

2，对象赋值的两种方法

　　第一种，直接定义，设置默认值

        Man_2 = Backbone.Model.extend({
            initialize:function(){
            },
            defaults:{
                name:'苏三',
                age:18
            }
        })

        var manTwo = new Man_2();
        alert(manTwo.get('name')); //苏三

　　第二种，赋值时定义

        Man_2 = Backbone.Model.extend({
            initialize:function(){
            },
            defaults:{
                name:'苏三',
                age:18
            }
        })

        var manTwo = new Man_2();
            manTwo.set({sex:"女"});
        alert(manTwo.get('sex')); //女

　　取值的时候用 Model.get()，赋值的时候用 Model.set();

3,对象中方法

        ManFun = Backbone.Model.extend({
            initialize:function(){},
            defaults:{
                name:'苏三',
                age:18
            },
            getName:function(){
                return this.get('name');
            }
        })

        var manFn = new ManFun();
        alert(manFn.getName()); //苏三

 

　　

4，监听对象中属性的变化

　　model.set(attributes,[options]) 向模型设置多个散列属性，如果任何一个属性改变了模型状态，在不传入 {silent:true}选项参数的情况下，会触发“change”事件，可以绑定事件到某个属性上，如：change:title

          var Sidebar = Backbone.Model.extend({
              promptColor:function(){
                  var cssColor = prompt("请输入一个CSS颜色值:");
                  this.set({color:cssColor}); 
                  //this.set({silent:true});
              }
          });
  
          window.sidebar = new Sidebar;
          sidebar.bind('change:color',function(model,color){
              $("#sidebar").css({background:color});
          });
  
          //sidebar.set({color:'yellow'});
          sidebar.promptColor();

　　上面的流程是：定义一个模型类，然后创建一个实例，调用对话框方法，向模型设置值，触发了 change 方法，就把页面上的ID=sidebar的背景色改变用户输入的颜色值

5，为对象添加验证的规则，已经错误提示

          var Sidebar = Backbone.Model.extend({
              promptColor:function(){
                  var cssColor = prompt("请输入一个CSS颜色值:");
                  this.set({color:cssColor},{"validate":true}); 
                //this.set({silent:true});
              },
            defaults:{
                color:"yellow"
            },
            validate:function(arg,options){
                if(arg.color != "red"){
                    return "不是红色";
                }
            }
          });
  
          window.sidebar = new Sidebar;
          sidebar.bind('change:color',function(model,color){
              $("#sidebar").css({background:color});
          });

        sidebar.bind('invalid',function(model,error){
            alert(model.get("color")+","+error);
        })
  
          //sidebar.set({color:'yellow'});
          sidebar.promptColor();

　　如果模型拥有 validate 方法，那么属性验证就会在set 和 save 之前调用，如果验证失败，模型不会发生反应，如果 validate返回错误，

set 和 save 将不执行。失败的验证会触发一个 error （invalid）事件。

 

6，model对象数据的获取和保存，需要服务器支持才行。

　　1，post 提交数据到服务器端，

　　　　首先需要为对象定义一个 Url  属性，调用 save方法时候会Post对象所有属性到server端

          // 登录请求
          Login = Backbone.Model.extend({
              url:'http://xxx/index.php?m=home&c=member&a=login',
              initialize:function(){
                  //console.log("init");
                  //初始化时监听数据
                  this.bind("change:member_mobile",function(){
                      var name = this.get("name");
                  });

                  this.bind("invalid",function(model,error){
                      console.log(error);
                  })
              },
              defaults:{
                  member_mobile : "",
                  member_passward:""
              },
              validate:function(attr){
                  if(attr.member_mobile == ""){
                      return "name不能为空";
                  }
              }
          });

        var login = new Login;
        login.set({member_mobile:"15910216409",member_passward:"123456"},{"validate":true});
        //1,Post提交
        login.save(); //会发送Post到模型对应的Url，数据格式为 json{member_mobile:"15910216409",member_passward:"123456"}

　　2，get 请求数据

　　　　紧接上文中的代码，从服务器获取数据的方法使用 fetch([options]),函数里介绍请求参数，包括url，请求成功的方法和失败的方法。返回的数据格式是 json。　　　　

        //2,Get请求
        login.fetch({
　　　　　　　　url:'http://xxx.php?m=home&c=member&a=login&member_mobile=15910216409&member_passward=123456',
　　　　　　　　success:function(model,result){
           　　 console.log(result.member_id);
              }
　　　　 })

　　　注：使用的时候，可把模型的url属性去掉。

　补充：关于向服务器的异步操作都是通过Backbone.sync()（每次向服务器读取和保存模型时都要调用执行的函数）这个方法来实现的，调用这个方法的时候会自动传递一个参数过去，根据参数想服务器端发送对应的请求。下面是关于参数的对应关系。

　　1，调用 save() 时 ,backbone会判断对象是否是新的，如果是参数则是 create 否则是 update

　　2，调用 fetch() ,那么参数就是read

　　3，调用 destroy(),那么参数就是 delete

参数的动作也就是所谓的：CRUD(create,read,update,delete) 增删改查，这四种参数对应的请求类型为POST，GET，PUT，Delete。你可以在服务器根据这个request类型，做出相应的 CRUP操作。