首页 > 代码库 > Backbone.js学习之Model

Backbone.js学习之Model

首先,我们看一下官方文档中对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开发文章

Backbone.js学习之Model