backbone.js學習筆記

時間 2019-11-18

標籤 backbone.js backbone 學習筆記欄目 JavaScript 简体版

原文原文鏈接

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。