BackboneのModelとCollectionのまとめ。Backboneの全３回の２回目の内容。

1. Backboneの
Model と Collection
ryuma tsukano
jsCafe8

2. 目次
● MV*の振り返り
● localstorage
● Model
○ extend
○ メソッド
○ 初期化/初期値
○ 属性操作
○ CRUD
○ id/cid/id attribute
○ validate
○ event
● Collection
○ modelとの関連
○ ソート
○ 基本操作
○ underscoreから委譲されたメソッド
○ chain
○ CRUD
○ event

3. BackboneのMV*
BackboneのMV* (公式page＋補足)
● Model
○ ビジネスロジックに必要なデータの集まり
○ rails等のmodelと同じイメージ。
● Collection
○ クライアント側のモデルのグループ。
○ ソートやフィルターや集計ロジックを書く。
● Router
○ URLと関数を繋ぐ
○ railsのroutes.rb + controller action
● View
○ ロジック込みで再利用できるUIの小片。
○ 玉に、(常ではないが)modelと関連付く
● Template(client side)
○ HTMLの固まり
○ railsの .html.erb view

4. 今日はlocalstorageを使う
html5のlocalstorage
自分自身のPC内にdata(Key&Value)を蓄積する仕組み

5. Backbone.localstorage
backboneでlocalstorage使う為のplugin有り
https://github.com/jeromegn/Backbone.localStorage
■HTML
<script type="text/javascript" src="backbone.js"></script>
<script type="text/javascript" src="backbone.localStorage.js"></script>
■JS
SomeCollection = Backbone.Collection.extend({
localStorage: new Backbone.LocalStorage("SomeCollection")
});

6. また手を動かしましょう
html作るの面倒臭いので、
既にlocalstorage+Backbone有る環境で
chrome devtoolsのconsloleで試そう
=>Backboneのtodo
適宜ソース試してみてね。

7. model

8. Backboneのmodel
基本文法
//クラスのようなもの ※以降クラスと略
var MyModel = Backbone.Model;
//インスタンスのようなもの ※以降インスタンスと略
var model = new MyModel;
※var model = new MyModel({ name : "test" })のように初期値を指定できる。

9. extend
extend関数に独自のメソッドを入れて独自のクラスを作る
● Backboneのextend inspired by google closure
○ = underscoreの_.extend
■ = JS継承パターン、プロパティのコピー
var MyModel = Backbone.Model.extend({ 独自の処理 });
var model = new MyModel;

10. メソッド
● インスタンスメソッド：インスタンスで使える
● スタティックメソッド：クラスで使える
● インスタンス変数、スタティック変数も同じ
var MyModel = Backbone.Model.extend(
{インスタンスメソッド : function () { ... } } ,
{スタティックメソッド : function () { ... } }
);
MyModel.スタティックメソッド
var my_model = new MyModel;
my_model.インスタンスメソッド

11. 初期化
● インスタンス時のnew Model(attr, opt)
● =>クラスの
○ initialize内関数()
var Human = Backbone.Model.extend({
initialize : function () {
console.log('initialize now! ');
}
});
var human = new Human;
// => initialize now !

12. 初期値
default : デフォルト値を入れる
● newの引数内の初期値に無い項目を埋めてくれる
● ※objectを入れる場合、関数にしないと他のinstanceにも影響
●
●
●
● initialize と defaultの違い★
○ initialize : parameter自体を元に処理書ける(動的なデフォルト値)
○ default : default値=>与えたparamで上書き（静的なデフォルト値）
var Human = new Backbone.Model.extend({
defaults : {
"name" : "taro",
"age" : "20"
}
});
var defaultman = new Human;
defaultman.attributes // =>{"name": "taro", "age":20}
var yamada = new Human({"name":"yamada"})
yamada.attributes // => {"name":"yamada", age:20}
var hanako = new Human({"name":"hanako", "age":18})
hanako.attributes // {"name":"hanako", "age":18}

13. 属性
● get/set：取得/格納
● has：確認
● attributes：全体の値の取得
var human = new Backbone.Model;
human.set('name', 'Yamada');
human.set('age', 18);
// ちなみに、human.set({"name":"Yamada", "age":18})とも書ける
human.get('age'); // 18
human.has('age'); // true
human.attributes; // {"age": 18}

14. CRUD：
● 作成更新:save(=>jqueryの$.ajax通信)
○ isNew(※後述)で作成/更新(post/put)分けてる ※Rest詳細は次回
● 読み込み:fetch
● 削除:destroy
var Human = Backbone.Model.extend({
localStorage : new Backbone.LocalStorage("ACollection")
//この書き方間違ってます。本来 collectionで使うべき。あくまで説明用に使ってます。
})
var human = new Human;
human.set({"name":"taro"});
human.save(); // この2行をhuman.save({"name":"taro"})でもいける
var another = new Human({"id": human.id});
another.fetch();
another.attributes; // => name:taro

15. id
● id : データのID
○ isNew()は、このidの有無で判別(id無ければisNew=true)
● cid : モデル作成時にbackboneが発番。
○ 保存してないのでid無いが、Viewに存在する場合扱い易くする為
● idAttribute : サーバーから提示されたIDがどれか示す。
○ デフォルトはid。例えば、mongodbなら_idにする。
var Human = Backbone.Model;
var human = new Human({"name":"taro"});
console.log("id : " + human.id);
console.log("cid : " + human.cid); // c1
console.log("isNew : " + human.isNew() ); // true idが無いから
human.set("id":123)
console.log("isNew : " + human.isNew() ); // false idが有るから

16. validation
model.validate(attr, opt)＝値のチェック
戻り値
● 正常：戻り値なし
● 異常：戻り値あり(エラーobj/msg等)
validateするtiming
● save前に必ず
● set時に{validate:true}付けた時に
○ ※Parseはsave内でvalidate無い?
エラー時の動作
● saveしない
○ setでvalidateした時はsetしない
● invalidイベントの引き金を引く
● validationErrorプロパティが着く
複数ある時はerr msg等1つのobjにまとめて最後にreturnしないと全部出ない
var Human = Backbone.Model.extend({
validate : function (attrs, options) {
if (!attrs.age) {
return "you need write age";
}
}
})
var noage = new Human;
noage.set({"name": "yamada"},
{"validate":"true"});
console.log(noage)
// => validateErrorプロパティがある

17. model間の参照関係
1:n等の関連付けの方法が一番気になりますよね。
=>Backboneには、この仕組み無い。
選択肢
● 1の方にnの内容も埋める
○ メリット：扱い楽チン
○ デメリット：階層が深くなると管理が大変
● RDBみたいに、nの方にid入れる
○ メリット：再利用性高い
○ デメリット：取得処理が冗長/煩雑になる可能性
使うstorageによっても制約条件が異なるのでcase by case
(ex. mongodbはjoinが無い)
plugin有るみたい
● backbone-relational
● 他にも幾つか類似plugin有り

18. ModelのEvent
※Event自体の詳細は次の回にお任せ
元々Modelに以下のイベントが仕込まれている
● add : collectionに追加された時
● remove :
● change : [attr] 値が変わった時
● destroy :
● request :
● sync :
● error :
● invalid : validateして失敗した時
赤＝よく使う
var Human = Backbone.Model.extend({
initialize : function () {
this.on('change', this.show_msg, this);
},
show_msg : function() {
console.log('Human is now changing');
}
});
var human = new Human({"age":31});
human.set("age",18);

19. collection

20. Backboneのcollection
コレクション＝複数のデータが入る
基本的な使い方はmodelと一緒
● extendする
● クラスとインスタンスがある
var MyCollection = Backbone.Collection.extend({ ... }) // この中に独自処理書く
collection = new MyCollection([
{ id:1, "name":"a"},
{ id:2, "name":"b"}
])
collection.models; // {id:1, "name":"a", id:2, "name":"b"}

21. 基本操作
● 追加 : add
● 取得 : get(id or cid) / where({key:value}) / at(index)
● 全部取得：models
● 削除：remove(target)
var People = Backbone.Collection.extend();
var japanese = new People;
japanese.add({"id":1, "name":"taro"});
japanese.add({"id":2, "name":"hanako"});
japanese.get(1); // {"id":1, "name":"taro"}
japanese.where({"name":"taro"}); // {"id":1, "name":"taro"}
japanese.models(); // {"id":1, "name":"taro"}, {"id":2, "name":"hanako"}
var yamada_taro = japanese.at(0);
japanese.remove(yamada_taro);

22. modelとの関係付け
modelに指定
var Person = Backbone.Model;
var People = Backbone.Collection.extend({
model : Person
});
var japanese = new People;
japanese.add(new Person({"name":"yamada"}));
japanese.add([
new Person({"name":"tanaka"}),
new Person({"name":"yoshida"})
]);
japanese.models

23. ソート
３通り書き方あり
● model.get(カラム)
● 1 / -1を返して並び替え
● カラムを指定
var People = Backbone.Collection.extend({
// 3通りの書き方あり(全部一緒)
comparator : function(model){
return model.get("id");
}
comparator : function(a,b){
return a.get('id') < b.get('id') ? -1 : // aがbより前の時-1
a.get('id') > b.get('id') ? 1 : 0 // bがaより前の時1
}
comparator : 'id'
});

24. underscoreから委譲された関
数
● forEach : よくあるイテレータ
● map/pluck/find等役立つ関数いっぱいある
○ rubyと同じ感覚で操作できる
var People = Backbone.Collection;
japanese = new People([
{"name" : "yamada"},
{"name" : "tanaka"}
]);
japanese.forEach(function(model){
console.log(model.get('name'));
})

25. chainメソッド
.chain. ... .value() : underscoreからのメソッドチェーン(無いとArray)
var People = Backbone.Collection;
var people = new People([
{"name":"yamada", "age":31, blood : "A"},
{"name":"tanaka" , "age": 18, blood : "B"},
{"name":"yoshida" , "age" : 25, blood : "A"}
])
// =======================================
var a_person = people.chain()
.filter(function(person) {
return person.get('blood') == "A"; // A型のデータを抽出
})
.max(function(person){
return person.get("age"); // ageが最大のものを抽出
})
.value(); // ２つの条件を満たしたyamadaさんがとれるはず
console.log(a_person.attributes);

26. CRUD
● 追加：create
● 取得：fetch
○ ※ちなみに、syncは次回！Restと一緒に見ます！
var People = Backbone.Collection.extend({
localStorage : new Backbone.LocalStorage("PeopleCollection")
})
var people = new People;
people.create({"name":"taro"});
people.create({"name":"hanako"});
var another = new People;
people.fetch(); // {"name": "taro"},{"name": "hanako"}
console.log(people.models)

27. collectionのevent
● add :
● remove :
● reset :
● sort :
● destroy :
さっきのmodelのイベントと一緒。
使い方含め、次のEvent参考。

28. model/collectionは終わり
お次はview/event