2014/08/05 – Backbonejs

(function ($) {

    //依赖 backbone.mutators.js
    //https://github.com/asciidisco/Backbone.Mutators

    /* 注：如果使用 setter 方法为属性赋值，那么触发它的唯一方式就是调用 set() 方法。
        在初始化模型时，除非为属性显示触发 change 事件，否则其 setter 赋值方法不会被调用，原因是change不会被触发。*/

    //define ----------------------------
    var ModelM = Backbone.Model.extend({
        mutators: {
            //重写虚属性
            fullName: {
                get: function () {
                    return this.firstName + ‘ ‘ + this.lastName;
                },
                set: function (key, value, options, set) {
                    var names = value.split(‘ ‘);
                    this.set(‘firstName‘, names[0], options);
                    this.set(‘lastName‘, names[0], options);
                }
            },
            //重写已有属性
            isAdmin: {
                get: function () {
                    return this.isAdmin ? "Admin" : "Guest";
                    /* 注：可通过模型对象的 attributes 属性来获得其属性的原始值
                       如： modelInstance.attributes.isAdmin */
                },
                set: function (key, value, options, set) {
                    set(key, value === "Admin", options);
                }
            }
        }
    });
    //instance --------------------------
    var modelInstance = new ModelM({
        firstName: ‘James‘,
        lastName: ‘Bell‘,
        isAdmin: true
    });
    //apply ----------------------
    modelInstance.get(‘fullName‘);
    modelInstance.set(‘fullName‘, ‘Yo ABC‘);
    //绑定赋值方法事件
    modelInstance.on(‘mutators:set:fullName‘, function (a, b, c, d) {

    });

})(jQuery);

(function ($) {
    //依赖 backbone.memento.js
    //https://github.com/derickbailey/backbone.memento

    //define ---------------------------
    var ModelT = Backbone.Model.extend({
        initialize: function () {
            //插件扩展
            _.extend(this, new Backbone.Memento(this, {
                ignore: [‘description‘]//被忽略的属性集合
            }));
        }
    });

    //instance -----------------
    var modelInstance = new ModelT({
        name: ‘James‘,
        description: ‘‘,
        age: 22
    });

    //apply --------------------
    modelInstance.set(‘age‘, 23);
    //保存状态
    modelInstance.store();

    modelInstance.set(‘age‘, 25);
    var ageValue = modelInstance.get(‘age‘);

    //获取之前状态
    modelInstance.restore();
    ageValue = modelInstance.get(‘age‘);

    //恢复到第一个状态
    modelInstance.restart();
    ageValue = modelInstance.get(‘age‘);

})(jQuery);

(function ($) {
    //依赖 backbone.workflow.js
    //https://github.com/kendagriff/workflow.js

    //define ---------------------------
    var ModelW = Backbone.Model.extend({
        workflow: {
            initial: ‘draft‘,//默认状态
            //定义工作流转换状态集合
            events: [
                { name: ‘issue‘, from: ‘draft‘, to: ‘issued‘ },
                { name: ‘payout‘, from: ‘issued‘, to: ‘paid‘ },
                { name: ‘cancel‘, from: ‘draft‘, to: ‘canceled‘ },
                { name: ‘cancel‘, from: ‘issued‘, to: ‘canceled‘ }
            ]
        },
        initialize: function () {
            //扩展插件
            _.extend(this, new Backbone.Workflow(this, { attrName: ‘status‘ }));//设置状态属性名

            //绑定工作流相应转换事件
            this.bind(‘transition:from:draft‘, function () {
            });
            this.bind(‘transition:to:issued‘, function () {
            });
        }
    });

    //instance ------------------------
    var modelInstance = new ModelW();
    var status = modelInstance.get(‘status‘);//draft
    //工作流转换
    /* 注：只有 triggerEvent 方法才能触发转换事件 */
    modelInstance.triggerEvent(‘issue‘);
    status = modelInstance.get(‘status‘);//issued
})(jQuery);

(function ($) {
    //依赖 backbone.validation.js
    //https://github.com/thedersen/backbone.validation

    //define -----------------------------------------------------
    //插件扩展
    _.extend(Backbone.Model.prototype, Backbone.Validation.mixin);

    var ModelV = Backbone.Model.extend({
        validation: {
            name: {
                required: true,//必填
                length: 16,//字符长度
                oneOf: [‘ABCDEF‘, ‘FEDCBA‘]//唯一匹配
            },
            email: {
                pattern: ‘email‘,//类型(number, digits, email, url)和正则
                minLength: 10,//字符最小长度
                maxLength: 20,//字符最大长度
                rangeLenght: [10, 20]//字符区间
            },
            twoEmail: {
                equalTo: ‘email‘//和另一个属性相同
            },
            isAccept: {
                acceptance: true// boolean 校验
            },
            age: {
                min: 18,//数字最小
                max: 60,//数字最大
                range: [18, 60]//数字区间
            }
        }
    });

    //用法同基础校验相同

    /* 验证 HTML 表单 */
    //在 View Model 的 initialize 函数里 扩展插件 Backbone.Validation.bind(this);
    //生成的 HTML 会带有 class=‘invalid‘ data-error=‘‘
})(jQuery);

(function ($) {
    //依赖 backbone.nested.js
    //https://github.com/afeld/backbone-nested

    //define --------------------------
    //使用其基类进行扩展
    var ModelN = Backbone.NestedModel.extend({});

    //instance -------------------------
    var modelInstance = new ModelN();

    //apply -------------------
    modelInstance.set({
        ‘name.title‘: ‘Mr‘,
        ‘name.generation‘: ‘II‘
    });
    modelInstance.get(‘name‘); //{title:‘Mr‘,generation:‘II‘}
    modelInstance.get(‘name.title‘); //Mr

    //值为数组
    modelInstance.set({
        ‘addresses‘: [
            { city: ‘Brooklyn‘, state: ‘NY‘ },
            { city: ‘Oak Park‘, state: ‘IL‘ }
        ]
    });
    modelInstance.set(‘addresses[1].state‘, ‘MI‘);
    modelInstance.get(‘addresses[1].state‘);//MI
    //add remove
    modelInstance.add(‘addresses‘, { city: ‘TianJin‘, state: ‘TJ‘ });
    modelInstance.remove(‘addresses[2]‘);
    //bind 回调事件
    modelInstance.bind(‘change:addresses[0].city‘, function (model, value) {

    });
})(jQuery);

(function ($) {
    //依赖 backbone.relational.js
    //https://github.com/pauluithol/backbone-relational

    //define ----------------------------------------
    //通过其基类进行扩展
    var UserModel = Backbone.RelationalModel.extend({});

    var BuyerModel = Backbone.RelationalModel.extend({
        relations: [
            {
                type: Backbone.HasOne,//一对一枚举值
                key: ‘user‘,//相关模型属性名称
                relatedModel: UserModel,//相关模型对象
                reverseRelation: {//反向关联设置
                    type: Backbone.HasOne,
                    key: ‘buyer‘
                }
            }
        ]
    });

    //instance ------------------------------------
    var userInstance = new UserModel({
        name: ‘James‘
    });
    var buyerInstance = new BuyerModel({
        fullName: ‘James Bell‘,
        user: userInstance
    });
    buyerInstance.get(‘user‘).get(‘name‘);//James

    var user2 = new UserModel({
        name: ‘Bell‘,
        buyer: {//快捷定义
            fullName: ‘James Bell‘
        }
    });
    user2.get(‘buyer‘).get(‘fullName‘);//James Bell

})(jQuery);