BackboneJs入门学习[04]—Model实践(2)-阿里云开发者社区

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

2022-05-27 128

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

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"事件
});

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

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

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

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

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

接受的数据和发送的数据均为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]