码迷,mamicode.com
首页 > 其他好文 > 详细

backbone--model--学习笔记

时间:2015-07-21 19:02:59      阅读:105      评论:0      收藏:0      [点我收藏+]

标签:backbone   backbone笔记   backbone model   backbone模型   

一、模型 - Model

    1.创建一个空的Note模型

        var Note = Backbone.Model.extend({});

    2.实例化Note模型

        1).实例化一个空的模型

            var note1 = new Note()

        2).实例化模型并添加属性

            var note2 = new Note({

                title: ‘backbone学习笔记‘,

                created_at: new Date()

            });

    3.模型的操作方法

        1).获取属性值

            note2.attributes;

            note2.toJSON();  //返回来一个对象

            JSON.stringify(note2); //返回json格式数据

        2).返回对象集合中是否包含指定的key值,包含返回true,否则返回false

            note2.has(‘title‘); 

        3).获取指定属性的值

            note2.get(‘title‘);  // 返回title属性的值

        4).删除指定属性的值

            note2.unset(‘title‘);

        5).设置指定属性的值 有此属性时,更改值,没有时添加此属性和值

            note2.set(‘title‘, ‘backbone学习笔记‘);

        6).清空对象中所有的属性

            note2.clear();

    4.设置模型的默认属性

        var Note = Backbone.Model.extend({

            defaults: {

                title: ‘‘,

                created_at: new Date()

            }

        });

    5.模型的初始化

        initialize: 此方法在实例化时立即调用

        var Note = Backbone.Model.extend({

            defaults: {

                title: ‘‘,

                created_at: new Date()

            },

            initialize: function() {

                console.log(‘新创建了一条笔记:‘ + this.get(‘title‘));

            }

        });

    6.属性发生变化时,触发的事件change

        var Note = Backbone.Model.extend({

            defaults: {

                title: ‘‘,

                created_at: new Date()

            },

            initialze: function() {

                console.log(‘新创建了一条笔记:‘ + this.get(‘title‘));


                this.on(‘change‘, function(model, options) {

                    console.log(‘属性的值发生了变化‘);

                });


                this.on(‘change:title‘, function(model, options) {

                    console.log(‘title 属性发生了变化‘);

                });

            }

        });

    7.验证属性的值 validate

        attributes: 对象属性

        options: 选项的参数

        var Note = Backbone.Model.extend({

            defaults: {

                title: ‘‘,

                created_at: new Date()

            },


            initialize: function() {

                console.log(‘新创建一条笔记:‘ + this.get(‘title‘));


                this.on(‘change‘, function(model, options) {

                    console.log(‘属性的值发生了变化‘);

                });


                this.on(‘change:title‘, function(model, options) {

                    console.log(‘title 属性发生了变化‘);

                });

            },


            validate: function(attributes, options) {

                if (attributes.title.length < 3) {

                    return ‘笔记的标题字符数要大于3‘;

                }

            }


        });

    8.验证失败后的事件 invalid

        model:对象

        error:错误信息

        var Note = Backbone.Model.extend({

            defaults: {

                title: ‘‘,

                created_at: new Date()

            },


            initialize: function() {

                console.log(‘新创建了一条笔记:‘ + this.get(‘title‘));


                this.on(‘change‘, function(model, options) {

                    console.log(‘属性的值发生了变化‘);

                });


                this.on(‘change:title‘, function(model, options) {

                    console.log(‘title 属性发生了变化‘);

                });


                this.on(‘invalid‘, function(model, error) {

                    console.log(error);   

                });

            },


            validate: function(attributes, options) {

                if (attributes.title,length < 0) {

                    return ‘笔记的标题字符要大于3‘;

                }

            }

        });


本文出自 “network” 博客,请务必保留此出处http://lipq09.blog.51cto.com/856751/1676749

backbone--model--学习笔记

标签:backbone   backbone笔记   backbone model   backbone模型   

原文地址:http://lipq09.blog.51cto.com/856751/1676749

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!