【Backbone.js】Modelのお勉強.1

高いんだよこの本。。
でもやってやろうって気にさせてくれた。。
よく本を人に借りるっていうのあるけど、
お金掛けた方が必死で勉強するよ？？

そんなわけでbackboneのモデルからお勉強。2月はCoffeeScriptとBackbone.jsとNode.jsやってきます。。

[javascript]
<script src="./js/external/jquery1.11.1.js"></script>
<script src="./js/external/underscore.js"></script>
<script src="./js/external/backbone.js"></script>
<script>
Book = Backbone.Model.extend({
initialize: function(){
console.log('a new book');
},
defaults:{
name : 'Book Title',
author: 'No One'
},
printDetails: function(){//繰り返し発生するタスクを処理するための関数
console.log(this.get('name') + 'by' + this.get('author'));
}
});
var myBook = new Book();
var thisBook = new Book({name: 'Beginning Backbone', author:'James Sugrue'});
console.log(thisBook.get('name')+ 'by' + thisBook.get('author'));

    console.log(thisBook.attributes);//すべての属性のJSON表現

    thisBook.set('name','Beginning Backbone.js');//コンストラクタの外側で属性値を変更する方法
    thisBook.set('year','2015');//yearという新しい属性値を作成

    //モデルで使用しなくなった属性の削除:unset()
    thisBook.set('year',2015);
    console.log('Book year' + thisBook.get('year'));
    thisBook.unset('year');
    console.log('Boook year' + thisBook.get('year'));

    //モデルの存在の確認:has()
    var hasYear = thisBook.has('year');
    var hasName = thisBook.has('name');
    console.log('Has an attribute called year:' + hasYear);
    console.log('Has an attribute called name:' + hasName);

    //clearメソッドを使ってモデル属性を全て削除する
    var newBook = new Book({name:'Another Book',author:'You'});
    //属性を全て削除
    newBook.clear();
    //newBook.hasがfalseを返す
    console.log('Has an attribute called name :' + newBook.has('name'));

    //モデルインスタンスの完全なコピ
    var clonedBook = thisBook.clone();

    //printDetails関数の使用
    thisBook.printDetails();

    //

//モデルのイベント
//変更イベントの処理
Book = Backbone.Model.extend({
initialize : function(){
// this.on('change',function(){//setメソッドが呼び出される度にこの関数が呼び出される
// console.log('Model Changes Detected');
// });

        //特定の属性の変更を待ち受ける場合。下記はname属性への変更のみ対応
        // this.on('change:name',function(){})

        //
        this.on('change',function(){

            // set()で呼び出される関数
            // console.log('Model has changed');

            //モデルの何が変更されたかを追跡する hasChanged()
            // if(this.hasChanged('name')){
            //     console.log('The name has changed');
            // }
            // if(this.hasChanged('year')){
            //     console.log('The year has changed');
            // }

            //変更された属性をまとめて取得:changedプロパティ
            // console.log('Changed attributes:' + JSON.stringify(this.changed));
            // Changed attributes:{"name":"Different Book"}
            //Changed attributes:{"year":"34"}

            //全ての属性について以前の状態をまとめて取得することもできる:previousAttributes
            // console.log('Previous attributes:' + JSON.stringify(this.previousAttributes()));
            // Previous attributes:{"name":"Book Title","author":"No One"}
            // Previous attributes:{"name":"Different Book","author":"No One"}

            //特定の属性に対して変更前の値を取得する: previous('属性名')
            console.log('Changed attributes:' + JSON.stringify(this.changed));
            if(this.hasChanged('name')){
                console.log('The name has changed from' + this.previous('name') + 'to' + this.get('name'));
            }
            // Changed attributes:{"name":"Different Book"}
            // The name has changed fromBook TitletoDifferent Book
            // Changed attributes:{"year":"34"}
        });
    },
    defaults: {
        name: 'Book Title',
        author: 'No One'
    },
    printDetails: function(){
        console.log(this.get('name') + 'by' + this.get('author'));
    }
});

//setメソッドには更新時にイベントを発生させないためのオプションパラメーターがある。このオプションを指定すると,changeハンドラが呼び出されなくなる
//変数を設定(本来ならchangeハンドラが呼び出される)
//changeハンドラが呼び出される
var thisBook = new Book();
thisBook.set('name','Different Book');
thisBook.set('year','34');
// //changeハンドラが呼び出されない
// thisBook.set('name','Differnt Book',{silent:true});

[/javascript]