JSライブラリ > Backbone.js

Backbone.js

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 とは

backboneの構成要素

Model

Collection

View

Model

使用例

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 : "テスト1"});

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

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

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

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

モデルのメソッド

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

モデルのトリガー

onメソッドで以下のトリガーをハンドリングする事で、値の変更時などにイベントを処理を行う事が可能

トリガー名説明
change値の変更時に起動されるトリガー
destroyオブジェクト削除時に起動されるトリガー
invalid入力チェックでエラー時に起動されるトリガー

save、destroy、fetch 時の挙動

ケース挙動送信されるHTTPリクエスト
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

Collection

使用例

var Tasks = Backbone.Collection.extend({
     model: Task
    ,localStorage: new Store("book-app")
});

WebAPIの呼び出し

localStorageへの保存

View

Viewの定義

イベントの定義

実装サンプル

コンストラクタを定義する

イベントの監視

モデルの内容をDOMに反映する

DOMの変更内容をモデルに反映する

saveメソッド呼び出し時の挙動を指定する

TODO:

トップ   差分 バックアップ リロード   一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2015-08-16 (日) 03:26:43 (1219d)