Backbone model collection (jscafe 8)

2,260 views
2,042 views

Published on

BackboneのModelとCollectionのまとめ。Backboneの全3回の2回目の内容。

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,260
On SlideShare
0
From Embeds
0
Number of Embeds
479
Actions
Shares
0
Downloads
10
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Backbone model collection (jscafe 8)

  1. 1. Backboneの Model と Collection ryuma tsukano jsCafe8
  2. 2. 目次 ● MV*の振り返り ● localstorage ● Model ○ extend ○ メソッド ○ 初期化/初期値 ○ 属性操作 ○ CRUD ○ id/cid/id attribute ○ validate ○ event ● Collection ○ modelとの関連 ○ ソート ○ 基本操作 ○ underscoreから委譲されたメソッド ○ chain ○ CRUD ○ event
  3. 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. 4. 今日はlocalstorageを使う html5のlocalstorage 自分自身のPC内にdata(Key&Value)を蓄積する仕組み
  5. 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. 6. また手を動かしましょう html作るの面倒臭いので、 既にlocalstorage+Backbone有る環境で chrome devtoolsのconsloleで試そう =>Backboneのtodo 適宜ソース試してみてね。
  7. 7. model
  8. 8. Backboneのmodel 基本文法 //クラスのようなもの ※以降クラスと略 var MyModel = Backbone.Model; //インスタンスのようなもの ※以降インスタンスと略 var model = new MyModel; ※var model = new MyModel({ name : "test" })のように初期値を指定できる。
  9. 9. extend extend関数に独自のメソッドを入れて独自のクラスを作る ● Backboneのextend inspired by google closure ○ = underscoreの_.extend ■ = JS継承パターン、プロパティのコピー var MyModel = Backbone.Model.extend({ 独自の処理 }); var model = new MyModel;
  10. 10. メソッド ● インスタンスメソッド:インスタンスで使える ● スタティックメソッド:クラスで使える ● インスタンス変数、スタティック変数も同じ var MyModel = Backbone.Model.extend( {インスタンスメソッド : function () { ... } } , {スタティックメソッド : function () { ... } } ); MyModel.スタティックメソッド var my_model = new MyModel; my_model.インスタンスメソッド
  11. 11. 初期化 ● インスタンス時のnew Model(attr, opt) ● =>クラスの ○ initialize内関数() var Human = Backbone.Model.extend({ initialize : function () { console.log('initialize now! '); } }); var human = new Human; // => initialize now !
  12. 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. 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. 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. 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. 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. 17. model間の参照関係 1:n等の関連付けの方法が一番気になりますよね。 =>Backboneには、この仕組み無い。 選択肢 ● 1の方にnの内容も埋める ○ メリット:扱い楽チン ○ デメリット:階層が深くなると管理が大変 ● RDBみたいに、nの方にid入れる ○ メリット:再利用性高い ○ デメリット:取得処理が冗長/煩雑になる可能性 使うstorageによっても制約条件が異なるのでcase by case (ex. mongodbはjoinが無い) plugin有るみたい ● backbone-relational ● 他にも幾つか類似plugin有り
  18. 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. 19. collection
  20. 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. 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. 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. 23. ソート 3通り書き方あり ● 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. 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. 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(); // 2つの条件を満たしたyamadaさんがとれるはず console.log(a_person.attributes);
  26. 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. 27. collectionのevent ● add : ● remove : ● reset : ● sort : ● destroy : さっきのmodelのイベントと一緒。 使い方含め、次のEvent参考。
  28. 28. model/collectionは終わり お次はview/event

×