Backbone.js の変更点 - 闘うITエンジニアの覚え書き

追加された行はこの色です。
削除された行はこの色です。
Backbone.js へ行く。
[[JSライブラリ]] > Backbone.js
* Backbone.js [#y37ef538]
#setlinebreak(on)

#contents
-- サンプル
--- http://www.magata.net/test/backbonejs/

 http://www.cyokodog.net/blog/backbone-js/
 http://www.slideshare.net/mobile/makingx/backbonejsangularjs
 http://qiita.com/opengl-8080/items/36e9b380c64ba7766511
 https://appkitbox.com/knowledge/javascript/20130604-52


** Backbone.js とは [#td4d4175]
#html(<div style="padding-left:20px;">)
#html(</div>)

** backboneの構成要素 [#ua1d7bdb]
#html(<div style="padding-left:20px;">)

*** Model [#w7c84a06]
#html(<div style="padding-left:20px;">)
#html(</div>)

*** Collection [#kda152d8]
#html(<div style="padding-left:20px;">)
#html(</div>)

*** View [#db7972f1]
#html(<div style="padding-left:20px;">)
#html(</div>)

#html(</div>)

** Model [#pef2def3]
#html(<div style="padding-left:20px;">)

*** 使用例 [#wc27714d]
#html(<div style="padding-left:20px;">)

#mycode(){{
var Book = Backbone.Model.extend({
    // 初期値
    defaults: {
        id    : null
       ,isbn  : null
       ,title : 'default'
       ,price : 1000
    },

    // save時に呼び出すURL
    urlRoot: "/backbonejs/book/" ,

    // 入力チェック
    validate : function(attrs){
        var errMsg = "";
        if (_.isEmpty(attrs.title)) {
            errMsg = "タイトルを入力して下さい";
        }
        return errMsg;
    }
});

// モデルのインスタンス生成
var book = new Book({id : 1, isbn : "test1", title : "テスト１"});

// エラー時の処理を指定
book.on("invalid", function(model, error) {
   alert(error);
});

// インスタンスの中身を表示
console.log(book.toJSON());

// タイトルを変更
var ret = book.set({ title : "テスト２" }, {validate : true});
if (!ret) {
    console.log("入力チェックエラー");
}
console.log(book.toJSON());

// タイトルを空に変更
ret = book.set({ title : "" }, {validate : true});
if (!ret) {
    console.log("入力チェックエラー");
}
console.log(book.toJSON());
}}
#html(</div>)

*** モデルのメソッド [#ha58418d]
#html(<div style="padding-left:20px;">)
|メソッド名|説明|使用例|h
|get|属性等を取得する|book.get("title")|
|fetch|ローカルストレージに保存されたモデルをインスタンスに展開する|book.fetch()|
|destroy|モデルを削除する|book.destroy()|
|clear|モデルの属性等をクリアする|book.clear()|
|toJSON|JSONに変換する|book.toJSON()|
|set|属性等をセットする|book.set({title : "タイトル１"})|
|unset|属性等を未セット状態にする|book.unset("price")|
|on|イベントを登録する|book.on("invalid", function(model,error){ alert(error); })|
|once|1度きりのイベントを登録する||
|off|イベントを登録を解除する||
|isNew|||
|isValid|||
|save|モデルを登録する(localStorageへの登録やWebAPIの呼出を行う)|book.save();|
#html(</div>)

*** モデルのトリガー [#qf90e4ca]
#html(<div style="padding-left:20px;">)
onメソッドで以下のトリガーをハンドリングする事で、値の変更時などにイベントを処理を行う事が可能
|トリガー名|説明|h
|change|値の変更時に起動されるトリガー|
|destroy|オブジェクト削除時に起動されるトリガー|
|invalid|入力チェックでエラー時に起動されるトリガー|
#html(</div>)

*** save、destroy、fetch 時の挙動 [#z6006136]
#html(<div style="padding-left:20px;">)
|ケース|挙動|送信されるHTTPリクエスト|h
|id が未設定のモデルを save|登録が行われる|POST /xxxx/ |
|id が設定済のモデルを save|更新が行われる|PUT /xxxx/123 |
|id が設定済のモデルを destroy|削除が行われる|DELETE /xxxx/123 |
|id が設定済のモデルを fetch|検索が行われる|GET /xxxx/123 |
※ リクエストURLの /xxxx は urlRoot で指定したURL
※ リクエストURLの 123 は id
#html(</div>)

#html(</div>)


**Collection [#q7d28f0a]
#html(<div style="padding-left:20px;">)

*** 使用例 [#ydd69f04]
#html(<div style="padding-left:20px;">)
#mycode(){{
var Tasks = Backbone.Collection.extend({
     model: Task
    ,localStorage: new Store("book-app")
});
}}
#html(</div>)

*** WebAPIの呼び出し [#q456f499]
#html(<div style="padding-left:20px;">)
#html(</div>)

*** localStorageへの保存 [#f1e62807]
#html(<div style="padding-left:20px;">)
#html(</div>)

#html(</div>)


** View [#w19750e9]
#html(<div style="padding-left:20px;">)

*** Viewの定義 [#kbe650a8]
#html(<div style="padding-left:20px;">)
#html(</div>)

*** イベントの定義 [#m83531d7]
#html(<div style="padding-left:20px;">)
#html(</div>)

#html(</div>)

** 実装サンプル [#rb16824d]
#html(<div style="padding-left:20px;">)

*** コンストラクタを定義する [#d36cd233]
#html(<div style="padding-left:20px;">)
#html(</div>)

*** イベントの監視 [#y5d93df1]
#html(<div style="padding-left:20px;">)
#html(</div>)

*** モデルの内容をDOMに反映する [#cb7c1ed4]
#html(<div style="padding-left:20px;">)
#html(</div>)

*** DOMの変更内容をモデルに反映する [#x5bc20ff]
#html(<div style="padding-left:20px;">)
#html(</div>)

*** saveメソッド呼び出し時の挙動を指定する [#wbbcf120]
#html(<div style="padding-left:20px;">)
#html(</div>)

#html(</div>)

#todo