Backbone.jsのModelを復習

https://app.codegrid.net/entry/backbone-model

by FiNGAHOLiC

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.10/backbone-min.js"></script>
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<button id="buttonDone">完了</button>
<label><input type="checkbox" id="checkboxDone">Todoを完了する</label>

JavaScript

(function(){
    
    var Todo = Backbone.Model.extend({
        // すべてのインスタンスの初期値を設定
        defaults: {
            age: 20,
            skill: ['html, javascrit', 'css']
        }
    });
    
    var todo = new Todo();
    
    todo.set('firstName', 'foo');
    todo.set('lastName', 'bar');
    
    console.log(todo.get('firstName'));
    console.log(todo.get('lastName'));
    
    console.log(todo.has('age'));
    console.log(todo.has('skill'));
    
}());

(function(){
    var Todo = Backbone.Model.extend({
        defaults: {
            completed: false
        }
    });
    var todo = new Todo({
        text: '勉強'
    });
    todo.on('complete', function(){
        console.log(todo.get('text') + 'が完了しました。');
    });
    var $buttonDone = $('#buttonDone').on('click', function(){
        todo.set('completed', true);
        todo.trigger('complete');
    });
}());

(function(){
    var Todo = Backbone.Model.extend({});
    var todo = new Todo({
        text: '掃除'
    });
    todo.on('change:completed', function(model, completed){
        if(completed){
            console.log(model.get('text') + 'が完了しました。');
        }else{
            console.log(model.get('text') + 'が未完了です。');
        };
    });
    var $checkboxDone = $('#checkboxDone').on('change', function(){
        var checked = $(this).is(':checked');
        if(checked){
            todo.set('completed', true);
        }else{
            todo.set('completed', false);
        };
    });
    
}());

// http://stackoverflow.com/questions/14426155/backbone-validate-does-not-work
// 0.9.1からはerrorイベントではなくinvalidイベントを使用し、set時の第2引数でvalidate: trueを渡す。
(function(){
    var Todo = Backbone.Model.extend({
        validate: function(attrs){
            if(!attrs.text){
                return 'textは必須です。';
            };
        }
    });
    var todo = new Todo();
    todo.on('invalid', function(model, err){
        console.log(err);
    });
    // todo.set('text', null);
    todo.set({
        text: null
    },...