未分類

BackboneとGoogle App Engineを使ったClient-side MVC (4/5)

Backboneの導入

ソースの取得はGitHubから行って下さい。まずはタスクの一覧を表示するところまでやってみます。HTMLとjavascriptは下記のようになります。

htmlではjquery、underscore、backboneを読み込みます。そして最後にmain.jsを読み込んで、ここでサーバへRESTを投げて一覧を取得します。

まずはBackbone.Modelを拡張して、モデルを生成します。これはGAEで作ったモデルのスタブ(プロキシ?)だと思えばいいです。BackboneにはModelとCollectionというものが定義してあり、これを拡張(extend)することで自前のモデルとコレクションを作ります。

Modelに必要な情報は、idAttributeとurlRootです。idAttributeはキーをどれにするかということですが、サーバがjsonを返すときにkeyを返すようにしたので、keyを指定します。urlRootはサーバ側のアドレスなので、ここでは/taskです。Collectionに必要な情報は、どのModelのコレクションなのか、とurlです。urlは同じく/taskです。

ここではTaskの一覧を取得するので、まずはTasksのインスタンスを作り、fetch関数を呼び出すだけです。doneの部分は、Deferred処理ってやつで(ここを参照)fetchが終わった時に何をするかというコールバック関数を書きます。ここではliタグを動的に生成してulタグの下に追加しています。さっそくブラウザを叩いて確認してみます。アドレスはlocalhost:11080/main.htmlです(ポート番号は直してください)。次のような結果がでれば成功です。

Screen Shot 2015-05-05 at 1.19.53 PM

BackboneのViewを使う

一覧がでるところまで出来ましたが、次は新規のタスクを作成する機能を追加してみます。しかし、今後HTMLが複雑になるにつれて、イベントやHTMLの生成でカオスになっていきます。その前にViewを導入してこれをスッキリさせましょう。

Backbone.Viewを拡張してTaskViewというクラスを追加しました。ViewというのはModelやCollectionとDOMを紐付けるクラスです。したがって、生成時にトップレベルのDOM(ここではdiv#tasks)を指定し、さらにModelやCollectionのインスタンスを渡します。Viewで覚えておくことは次の3つです。

  1. eventsで画面操作を定義
  2. initializeでモデル変更時のアクションを定義
  3. インスタンス生成時のパラメータ

eventsとは

jQueryでインベント割り当てをしていると、後で混乱するためViewではeventsというオブジェクトでイベントとコールバック関数の紐付けを行います。ここでは、button#createを押すと、onCreateという関数を呼ぶように指定しています。

initializeでやること

initializeは初期化の関数です。ここでやることは、モデルやコレクションのイベント(追加とか削除など)に対してどのコールバック関数を呼ぶかを定義します。このサンプルではaddというイベントに対してonAddという関数を紐付けています。addイベントはfetchやcollection.addを読んだ時に発火します。なので、fetchをしてtaskが追加されるたびに呼ばれ、liタグを追加するようになっています。

生成時のパラメータ

ViewはDOMとModel、Collectionの紐付けが仕事なので、DOMは必ず指定します。elというプロパティにセレクタを書くだけです。このサンプルはmodelを使っていないので、collectionだけ指定しています。

実行してみる

さて、これでタスクが登録できるようになったはずです。次のような結果になれば成功です。がんばってください。

Screen Shot 2015-05-05 at 2.21.32 PM

次回は

Backboneではtemplateを使うことで繰り返し項目を管理しやすくする機能があります。これを使ってタスクの完了や削除を作ってみます。これができればCRUDのすべてが完了したことになります。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です