Backbone.js学习之Model

爱被打了一巴掌 2022-08-06 10:30 217阅读 0赞

首先，我们看一下官方文档中对Model的解释（或者说定义）：
      
       
       
        Models are the heart of any JavaScript application, containing the interactive data as well as a large part of the logic surrounding it: conversions, validations, computed properties, and access control. You extend Backbone.Model with your domain-specific methods, and Model provides a basic set of functionality for managing changes.
      
       翻译成中文就是：
      
       
       
        Model是js应用的核心，包括交互数据以及围绕着这些数据的大部分逻辑：数据转换、验证、属性计算和访问控制。你可以使用特定方法来扩展Backbone.Model，并且Model本身就提供了一系列基本的管理功能。
      
       然后，我们还在文档中看到Model拥有好多方法，这里就不一一介绍了。 简单的Model例子 定义了一个最基础的Model，只是实现了initialize这个初始化方法。这个函数会在Model被实例化时调用。 var Man = Backbone.Model.extend({ constructor: function(){ alert('Hey, you create me!'); } }); var man = new Man; 初始化函数，也可以叫构造函数。比如你这里完全可以把constructor写成initialize，效果是一样的。至于为什么一样？这还得等到熟悉这个框架过后看看Backbone源码才能知道。 Molde对象属性赋值的两种方法 一种是设置默认值 var Man = Backbone.Model.extend({ initialize: function(){ alert('Hey, you create me!'); }, defaults: { name:'张三', age: '38' } }); var man = new Man; console.info(man.get("name")); 或者这样赋值 man.set({name:'the5fire',age:'10'}); console.info(man.get("name")); console.info(man); 从这个对象的取值方式可以知道，属性在一个Model是以字典（或者类似字典）的方式存在的，第一种设定默认值的方式，只不过是实现了Backbone的defaults这个方法，或者是给defaults进行了赋值。通过打印出man这个对象，我们可以发现，属性是存在一个叫做attributes的对象中的。 Model对象中的方法 var Man = Backbone.Model.extend({ initialize: function(){ alert('Hey, you create me!'); }, defaults: { name:'张三', age: '38' }, aboutMe: function(){ return '我叫' + this.get('name') + ',今年' + this.get('age') + '岁'; } }); var man = new Man; alert(man.aboutMe()); 也是比较简单，只是增加了一个新的属性，值是一个function。说到这，不知道你是否发现，在所有的定义或者赋值操作中，都是通过字典的方式来完成的，比如extend Backbone的Model，以及定义方法，定义默认值。方法的调用和其他的语言一样，直接 . 即可，参数的定义和传递也一样。 监听Model对象中属性的变化 假设你有在对象的某个属性发生变化时去处理一些业务的话，下面的示例会有帮助。依然是定义那个类，不同的是我们在构造函数中绑定了name属性的change事件。这样当name发生变化时，就会触发这个function。 var Man = Backbone.Model.extend({ initialize: function(){ alert('Hey, you create me!'); //初始化时绑定监听 this.bind("change:name",function(){ var name = this.get("name"); alert("你改变了name属性为：" + name); }); }, defaults: { name:'张三', age: '38' } }); var man = new Man; //触发绑定的change事件，alert。 man.set({name:'the5fire'}); //触发绑定的change事件，alert。 man.set({name:'the5fire.com'}); 为Model对象添加验证规则，以及错误提示 var Man = Backbone.Model.extend({ initialize: function(){ alert('Hey, you create me!'); //初始化时绑定监听, change事件会先于validate发生 this.bind("change:name",function(){ var name = this.get("name"); alert("你改变了name属性为：" + name); }); this.bind("invalid",function(model,error){ alert(error); }); }, defaults: { name:'张三', age: '38' }, validate:function(attributes){ if(attributes.name == '') { return "name不能为空！"; } } }); var man = new Man; // 这种方式添加错误处理也行 // man.on('invalid', function(model, error){ // alert(error); // }); //默认set时不进行验证 man.set({name:''}); //save时触发验证。根据验证规则，弹出错误提示。 man.save(); //手动触发验证, set时会触发 man.set({name:'moyi'}, { 'validate':true}); //验证通过时信息 if (man.isValid()) { alert(man.get("name")+"验证通过"); }
     其他精彩文章 jQuery教程(19)-jquery ajax操作之序列化表单 jQuery教程(18)-ajax操作之执行POST请求 jQuery教程(17)-ajax操作之向服务器传递数据 执行GET请求 jQuery教程(16)-ajax操作之加载XML文档
      
       
       
        jQuery教程(15)-ajax操作之执行脚本
      
       
      
       
       
        jQuery教程(14)-ajax操作之操作 JavaScript 对象
      
       更多关于android开发文章