未分類

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

今回の目標

今回の最終形は次のような画面を目指します。タスクごとのチェックボタンを設け、これで完了の表示と変更をできるようになっています。また、deleteボタンを右に設け、タスクを削除できるようになっています。新規作成は以前と同じですが、今回はBootstrapを使って(ちょっとだけ)見栄えを良くしています。ソースはこちらから取得して下さい。

Screen Shot 2015-05-11 at 5.35.39 PM

タスクView準備

まずHTMLは次のように編集しました。

特に大きな変更はありませんが、div#listというものを作り、ここにタスクの編集や削除機能を持った部品を入れていきます。前回はjQueryでタグを直接作り、それをappendで加えていきましたが、今回はチェックボックスや削除ボタンなどをつけるためhtmlは複雑になります。そこでBackboneの特徴でもある(というかunderscoreか)template機能を使ってみます。簡単に言うと、htmlの部品をあらかじめ作っておいて、そこにタイトルやら完了状態やらを適用することでタスクのViewを作っていくというものです。

テンプレート

main.htmlに次のようなコードを追加しました。scriptタグで囲ってあるのは、通常のhtmlと認識されないようにするためです。ここにidをつけることでjQueryから中身を取得できるようにしています。

さらにcssは次のように設定しています。

このテンプレートを使ってタスクViewを作ります。ここが今回の重要ポイントです。これを理解すればあとは簡単なのでがんばってください。jsに次のようなViewを追加します。

まずBackbone.Viewをextendしています。これは前回と同じなのでいいですよね。

classNameという属性は、TaskViewをnewした時に通常空のdivタグが用意され、そこに好きな要素(タイトルとかチェックボックスの部品)を加えていきます。この一番外側のdivにclass属性をつけるのが、className属性です。

次のtemplateという属性は、テンプレート関数を設定しています。テンプレート関数とはデータ(タイトルとか完了状態)を与えるとhtmlを吐き出してくれる関数です。元となるhtmlは文字列で与えますが、この文字列は先ほどhtmlの中にscriptタグで囲って作りましたね。あれをjQueryで取ってきてunderscoreのtemplate関数に渡します。

次のeventsは前回と同じなのでいいですね。render関数は外側のdivに部品のhtmlを追加する作業を行います。先ほど作ったtmplate関数にModelの値(attributesプロパティで属性をオブジェクト形式で取得できる)を渡してhtmlを生成しています。

最後のonDeleteとonEditは前回のonCreateとほぼ同じですが、次の2つを覚えておけば十分です。

  • Modelを削除するときはModel.destroy()を呼ぶ
  • Modelを更新するときはModel.set()からModel.save()を呼ぶ

さて、これでクライアント側の準備は完了です。

サーバサイドの処理

前回まではリストに新規追加する関数(post)と一覧取得の関数(get)のみをサーバサイドに作っていました。今回はそれぞれのタスクを編集(といっても完了フラグと立てる)機能と削除機能を作ってみます。いわばCRUDのCRは前回作りましたが、今回は残りのUDをつくろうということです。該当する部分のソースは次のとおりです。

重要な点は2つです。

  • TaskHandlerを新規作成
  • Routeの追加

TaskHandlerは前回までのTasksHandler(複数形です)と違い、単数のタスクを処理するという意味を持たせています。そして、関数は2つ用意しています。

1つ目はputですが、これはBackboneでModel.save()という関数を呼び出すと自動的にHTTPのPUTをサーバに投げます。その時にアドレスは/task/<key>となります。<key>というのはBackboneのモデル作成時に指定したidプロパティがそのまま入るという感じです。したがって、サーバ側ではこのkeyを受け取って、ここから(サーバ側の)Modelを復元し処理を行うという流れになります。

今回の処理はdoneプロパティを変えるだけなので、requestからjsonを取り出し、それを(サーバ側の)Modelに適用し、最後にput()関数を呼び出します。put関数はDBに保存するcommitと同じと考えて下さい。次のdelete関数ですが、これはBackboneでModel.destroy()を呼び出した時にHTTPのDELETEが呼ばれます。したがって、これを受け取って(サーバ側の)Modelにdelete命令を呼び出すだけです。

次に大事なのは、Routeを追加することです。前回のTasksHandler(CRの処理です)に加え、TaskHandler(UDの処理です)を追加するため、webapp2.Routeを1行加えます。これでサーバ側の処理は完了となります。

最後に

これでBackbone+GAEのシリーズは終わります。より大規模なシステムになるとBackboneでは処理が難しくなってきます。特にViewを切り替えた時のメモリリークが厄介です。そこで、大規模な場合にはMarionetteを導入することをおすすめします。MarionetteはBackboneを拡張し、Viewの切り替えやCollectionViewと呼ばれる素晴らしい仕組みを実現しています。そのうちMarionetteについても解説してみます。

 

コメントを残す

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