Backbone.Model

Backbone.Modelについて色々。

by FiNGAHOLiC

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>

JavaScript

(function($, window, document, undefined){

    // initialize
    (function(){
        
        var Example = Backbone.Model.extend({
            // attrsはモデルの値として設定されるが、
            // optionsはそうでは無いので、
            // データベースに保存する情報はattrsに渡し、
            // データベースには保存しない情報はoptionsに渡す。
            initialize : function(attrs, options){
                console.log('attrs', attrs);
                console.log('options', options);
            }
        });
        
        var example = new Example({ a : 1 }, { b : 2 });
        
        console.log(example.has('a')); // => true
        console.log(example.get('a')); // => 1
        console.log(example.has('b')); // => false
        console.log(example.get('b')); // => undefined
        
    }());

    // get, set, unset, clear
    (function(){
        
        var Blog = Backbone.Model.extend({
            defaults : {
                dataTime : (new Date()).toISOString()
            },
            initialize : function(attrs, options){},
            validate : function(attrs){
                if(attrs.text.lenght === 0){
                    return 'text is empty';
                };
            }
        });
        
        var blog = new Blog({
            text : '<script>alert(\'xss\')<\/script>'
        });
        
        // XSS等の危険がある場合はescapeを使用する
        console.log(blog.get('text')); // => <script>alert(\'xss\')<\/script>
        console.log(blog.escape('text')); // => &lt;script&gt;alert(&#x27;xss&#x27;)&lt;&#x2F;script&gt;
        
        // changeイベントを購読
        blog.bind('change', function(){ console.log('change'); });
        
        // change:textイベントを購読
        blog.bind('change:text', function(){ console.log('change:text'); });
        
        // 値を変更するとchange、change:textの両イベントが発行される
        blog.set({ text : 'foobar' });
        
        // 値が変わってるか確認
        console.log(blog.get('text')); // => foobar
        
        // silentオプションを指定するとイベントは発行されず、validateも実行されない
        blog.set({ text :...