BackboneJs入门学习[04]—Model实践(2)

⭐️ 本文首发自 前端修罗场(点击即可加入)，一个专注 Web 技术、答疑解惑、面试辅导、职业发展的社区。现在加入，即可参与打卡挑战，挑战成功即可获取一次免费的模拟面试机会，进而评估知识点的掌握程度，获得更全面的学习指导意见，不走弯路，不吃亏！

BackboneJs入门学习之模块—Model实践(2)

上一篇中，我们介绍了Model中对象的属性和方法，以及常用的change监听事件的使用，这一篇中，我们将进一步介绍Model对象的相关操作。

一、为对象添加验证规则以及错误提示

先看一个示例：

var Man=Backbone.Model.extend({
      initialize:function(){
   },
   defaults:{
         name:'张三',
         age:'10'
         }
    this.bind("invalid",function(model,error){
    alert(error);
invalid:function(attributes){
    if(attributes.name==' '){
    //验证name属性是否为空
      return "name 不能为空！";
}
}
});

var man=new Man;
man.on('invalid',function(model,error){
     alert(error);//添加错误处理
});
//用3种验证方式
man.set({name:' '});//No1. 默认set时不进行验证

man.set({name:''},{'validate':true});//No2 但手动触发验证set时会触发

man.save();//No3. save时触发验证，根据验证规则弹出错误提示,注：save()会将改变的属性发送到服务器， 将立即触发一个"change"事件
});

二、在于服务器进行交互时，对象的保存和获取

首先，在讲解示例前，需要明白一下几点：

1. 在和服务器（server,下同）交互时，需要为对象定义一个url属性；

2. 调用save()方法，会post对象的所有属性到server;

3. 调用fetch()方法，会发送get请求到server端；

4. 接受的数据和发送的数据均为Json格式；

Ok，了解了以上知识点，我们来讲解下面的示例：

var Man=Backbone.Model.extend({
     url:'/man',
     initialize:function(){
    alert('hello!');
    this.bind("change:name",function(){
           var name=this.get('name');
           alert('你改变了name属性值为:'+name);
   });
   this.bind('error',function(model,error){
              alert(error);
   });
   },
   defaults:{
           name:'张三',
           age:'10'
 },
 validate:function(attributes){
   if(attributes.name=""){
   alert("name属性不能为空！");
 }
 
}
});

var man=new Man;
man.set({name:'李四'});
man.save();//使用save时会触发Post到模型对应的url，数据格式使用Json，如{"name":"李四","age":"10"}

//例外，从server获取数据使用的方法，这里用到——fetch([options]),如下所示：

var man1=new Man;
//fetch有带参数和不带参数的方式，写法上不同

man1.fetch();
//No1.不带参数的方式，会发送get请求到model的url中 ，在server端可通过判断是get还是post方式，来进行对应的操作

man1.fetch({url:'/getmans/'});
//No2.带参数的方式，会发送get请求到/getmans/这个url中，server会返回Json格式的结果

但是，接受server返回的数据方法应该是这样的：

man1.fetch({url:'/man/',success:function(model,response){
     alert('success');
     alert(model.get('name'));
 },error:function(){
   alert('error');
}
)};//即在成功获取数据时与出现错误时，均有提示出现

这里要说明一下关于Backbone中Model模块的url与urlRoot的区别：

在Backbone的官方文档中，分别给出如下解释： url：返回模型资源在服务器上位置的相对 URL 。

urlRoot:通过指定 urlRoot 来设置生成基于模型 id 的 url。

示例：

var Book = Backbone.Model.extend({urlRoot : '/books'});
> var solaris = new Book({id: "1083-lem-solaris"});
> alert(solaris.url());
> //输出：/books/1083-lem-solaris
即请求的url地址格式为：/baseurl/[model.id]

小结：区别于发送CRUD参数时，当发送Put和Delete请求时，如果设置了urlRoot，那么请求的url地址就变成了/baseurl/[model.id]格式。

Ok，关于Model的知识点，我们就介绍到这里！欢迎你留言，一起交流，一起进步！下一篇中，我们将讲解一下Backbone中的Sync方法。

每篇一语：

Stupid is as Stupid does! 我们再接再厉！
笨鸟接着飞！努力奔跑！

❤️ 现在关注【前端修罗场】，后台回复【666】，即可获取一份【免费的优质学习资料】,一起学习，一起进步，不走弯路，不吃亏~