backbone.js学习笔记 

<!DOCTYPE html>
<html>
<head>
    <title>backbone</title>
    <script src="js/jquery-3.1.1.js"></script>
    <script src="js/underscore-1.8.3.js"></script>
    <script src="js/backbone-1.3.3.js"></script>
    <script>
   $(function(){
    //model
    Person = Backbone.Model.extend({        
        defaults: {
            //默认属性
            name: 'Fetus',
            age: 0,
            children: []
        },        
        validate: function(attrs){
            // 如果从validate中返回字符串了, Backbone就会抛个实例异常
            if( attrs.age < 0 && attrs.name != "Dr Manhatten" ){
                return "你的存在是个错误"+attrs.name;//validate失败,save将不会继续，属性不会改变；触发invalid事件，并且将返回值设给validationError属性
            }
        },
        initialize: function(){       
            alert("A brand new day!");//初期化构造方法
            this.bind("change:name", function(){
                var name = this.get("name"); // 监听属性
                alert("我的名字变为" + name );
            });
        },
        adopt: function( newChildsName ){
            var children_array = this.get("children");
            children_array.push( newChildsName );
            this.set({ children: children_array });
            alert("I have another baby! "+newChildsName);
        }
    });
    $("#check").click(function(){
        var person = new Person();
        person.on("invalid", function(model, error){
            // 收到个错误，记录，警告，然后忘记它。╮(‵▽′)╭
            alert( error );
        });
        
        // 会触发error，输出警告
        person.set({ name: "pattern1", age: -1 ,children: ['Ryan']});//不报错
        person.set({ name: "pattern5", age: -1 ,children: ['Ryan']},{validate:true});//报错
        alert(JSON.stringify(person));//查看所有属性，person.toJSON()?
        person.set({ name: "pattern6", age: -1 ,children: ['Ryan']});//不报错
        person.save({ name: "pattern2", age: -1 ,children: ['Ryan']});     //报错
        delete person;
        var person = new Person();
        person.on("invalid", function(model, error){
            // 收到个错误，记录，警告，然后忘记它。╮(‵▽′)╭
            alert( error );
        });
        person.set({ name: "pattern3", age: -1 ,children: ['Ryan']});//不报错
        var a=person.isValid();//报错；isValid方法会调用validate;返回布尔值
        if (!a) {
            alert("pattern4" + person.validationError);
        }
        person.adopt("Tom");
    })    
   })
    </script>
</head>
<body>
    <button id="check">试试模型和属性验证吧！</button>    
</body>
</html>

 

posted @ 2016-12-01 19:02  姑射蝉  阅读(181)  评论(0)    收藏  举报