Backbone.js Marionette イベント 他View間の連携

参考:Event Aggregator

アプリに、vent.onというのを使って、イベント発生時の挙動を登録する。あとは、登録したイベントを発生させたいところで、vent.triggerする。

他のView間で連携する場合は、Viewのinitialize関数で、下記のようにやる。

このViewのインスタンスが作成されるときに、initalize関数が呼ばれますが、そのときにHogeHogeというイベントが発生したら、このViewのhogeを実行するよと、登録している。あとは、他のViewで、App.vent.trigger(‘HogeHoge’);とやると、HogeHogeイベントが発火する。

Backbone.js ModelのSave

model.save(data, options);
第一引数は、登録するデータ。nullならモデルにセットされているデータが使われる。optoinsはsuccessとかerrorとか。

saveのrequest dataは、phpでうまく取得できない。cakePHPでサーバ側のコードをつくったけど、$this->request->data等が空になる。
参考:Backbone.js Model.save()によるPOSTデータをPHPで読み込む
ここに記載されている、“php://input”を使うと出来た。

Backbone.js(Marionette) – CollectionViewとCompositeView

ItemViewはシンプルだけど、collectionViewとcompositeViewというのがあるので、使い分けを確認する。

参考1:Marionette.jsまとめ その3 CompositeView, Layout, Region

CompositeViewは、テンプレートを設定することができるらしい。CollectionViewは、テンプレートを設定できない。では、CollectionViewの一般的使い方を確認します。

CollectionViewの使い方

参考2:Marionette.jsまとめ その2 View, ItemView, CollectionView

下記は、上記参考2の引用です。

ItemViewをセットして、CollectionViewが紐づくエレメントを指定する感じです。#fooList内に、#itemTemplateがcollectionが保持するModel分出力される感じになります。単純ではあります。

テンプレートをもうひとはさみしたい的な感じに、CompositeViewを使います。

CompositeViewの使い方

下記は、上記参考1の引用です。

多分、#listTemplateの中にある、#fooListの中に、collectionが保持するModel数分、FooItemViewを出力されます。そして、#listTempalteが、#mainの中に出力されます。って感じだと思う。

ちなみに、#foolistが、<ul>の場合、ItemViewのtagNameは、”li”にする必要があります。tagNameを設定しないとデフォルトでは、<div>で囲われますので、下記みたいな感じになってしまいます。

Backbone.jsとMarionette

http://backbonejs.org/ここのdevelopバージョンを使ってみます。Underscore.jsに依存します。http://underscorejs.org/
jQueryも使います。

モデル

こんな感じで、モデルを作成できる。defaultsで初期設定、initializeでコンストラクタの設定ができる。newで、モデルのインスタンスを作成し、setで、各値をインスタンスにセットできる。getで取得できる。hoge.get(‘name’);

こんな風に、newのときに、引数に値を渡すことでセットすることもできる。newでインスタンスを作成すると、cidというものが自動的に設定される。これはインスタンスを一意に識別するためのもの。

clone()で、インスタンスを複製できる。cidだけは、ユニークとなる。

その他、モデルのメソッド・プロパティは、attributes、clear、has、unsetがある。

モデルに関数を追加するのはこんな感じでできる。

属性の値を1追加するのに、こんなめんどうな書き方しかできないとは思えないんだけど、this.age ++;とかではエラーになった。
その他、モデルの変化に応じてイベントを発動したり、どこが変化したのかチェックしたり、モデルの変化が妥当な変化かをチェックするバリデーションルールの設定などができる。

モデルのサーバとのやりとり

はて、Ajaxでサーバとやりとりするのも、Bacbone.jsは便利になっているもよう。サーバ側をcakePHPでつくりながら試してみる。

モデルで、サーバとやりとりする際は、APIのURLを設定する。

あとは、saveメソッドを呼出すだけで、新規作成か更新処理をしてくれるということで、作成処理はPOSTアクセス、更新処理は、PUTアクセスする。saveメソッド呼び出し時に、id属性の指定があれば、更新処理とし、なければ新規作成とする。らしい。

便利そうでありつつ、色々注意が必要そうですが、一旦データ取得から確認してみたい。データ取得は、fetchメソッドらしい。

参考:試して学ぶ Backbone.js入門2この記事は分かり易そう。

cakePHPのcontrollerで下記のようなものをつくりました。Devモデルというのを既に作成済みです。

これにfetchアクセスする、backboneのコードをつくってみます。

これでできました。idを渡してみます。

できました。分かりました。取得後に、parseというのを使って、レスポンスに対して色々やったりするらしい。

コレクション

コレクションは、モデルのリストらしい。

View

viewは、モデルの変更に目を光らせて、レンダリングするやつらしい。モデルが変更されたらBackbone.Eventsによって、Viewに通知されて、その通知内容に基づいてレンダリングする内容をつくるらしい。そして、テンプレートに渡すという流れのようでありんす。つまり、cakePHPのモデルとbackboneのモデルは同じだけど、cakePHPのcontrollerとbackboneのviewが同じで、cakePHPのviewとbackboneのテンプレートが同じみたいな感じかなと思った。

Viewは、モデルやコレクションの変更に目を光らせるだけではなく、DOMの変更にも目を光らせる。そして、一つのViewは、一つのDOMに紐づける必要がある。DOMとの紐づけは、elプロパティが使える。紐づくDOMの条件をelの値として設定することができる。その他、tagName、className、id、attributesなどを設定することで、動的にel属性を作成することができる。elとtagNameとかが同時に設定されている場合、elの設定が優先されるし、el設定が存在しないdomを表している場合は、tagName等が設定されていても、elはundifinedになる。elを設定されている場合は、必ず存在するDOM条件を設定する必要があるようだ。elもtagName等も設定されていない場合は、空のdivがel属性の値になる。新たに作成されたel属性の場合は、el属性が作成された段階ではDOMに追加されないらしい。

HTML

Js

これのログへの出力結果は、<div id=”hoge”></div>となる。

viewのコンテンツを表示するには、renderメソッドを使う。

テンプレートは、Backbone.js自体に標準搭載されているわけではなく、一番シンプルなのは、Underscore.jsのテンプレート機能を利用することらしい。簡単そうなので、後で調べる。次にルーター機能について確認したいと思います。

ルーター

こんな感じでつくる。ということは、まずルーターのroutesがURLを検証して、何かに合致したら該当する関数を呼出すところからアプリケーションが始まるわけであります。そこから、viewを作って、そこで色々モデルを使いながら表示する内容をつくって、テンプレートに渡して表示するわけであります。実際的にはViewは、cakePHPのレイアウトとか、view、エレメントとかに分けて作成してそれを組み合わせていくわけであります。

Marionette

http://marionettejs.com/ Backbone.jsのコードをよりシンプルに、管理し易くしてくれるやつらしい。Backbone.js使うなら使った方がいいらしい。

参考:
Marionette.jsまとめ その1 Application, Controller, AppRouter
実践Backbone.Marionette 現場の悩みと解決まで
“Backbone.Marionette.js: A Gentle Introduction” を今更ながら勉強してみた

上記3つを見ると色々分かりそうだなーと思いました。ありたがいです。