Backbone.js Collection.fetch() による一覧画面の描画

Pocket

以前書いた、Backbone.js Model.save()によるPOSTデータをPHPで読み込むに続いて、
Backbone.jsを使ったリソース参照に関する記事です。

Backbone.jsを使った一覧表示サンプル

Backbone.jsのCollectionとModelを使って、Collection.fetchの結果を画面に一覧表示するサンプルを作ってみました。

一覧表示サンプル

サンプルの動作

  1. 「表示」ボタンをクリックすると、ユーザーリソースにGETリクエストを送信
  2. JSON形式のユーザー一覧データを含むレスポンスが返ってくる
  3. backbone_fetch_test.jsがレスポンスを解析して画面に表示する

サンプルを構成するファイル

サンプルを動作させているファイルの一覧と、ファイルの内容です。ブログ用にコメント多めに入れてます。

ファイル一覧

backbone-fetch-test.html
ユーザー一覧画面
backbone_fetch_test.js
ユーザー一覧をfetch(GETリクエスト)して、画面に表示するJavaScript
backbone_test_user.php
GETリクエスト先のPHPファイル(ユーザーリソース)

 

backbone-fetch-test.htmlの一部

ユーザー一覧を表示するテーブルとテンプレート部分です。

tbody内部に、id=”user_row_template”が示すテンプレートにユーザーデータを当てはめたものを表示します。ユーザーデータが取得できなかった場合は、id=”user_norow_template”が示すテンプレートをそのまま表示します。

 

backbone_fetch_test.js

入力されたIDをパラメーターにして、fetch(GETリクエスト)します。

fetchの結果得られるJSONは、このような形式を想定しています。

model.attributeを使ってテンプレートに値を当てはめたい場合、data部の属性のみをmodelに設定する必要があります。そこでparseを使ってdata部のみをreturnすることで、data部の属性のみをmodelに設定しています。
parseを使うと、モデルにレスポンスデータが反映される前に、レスポンスデータを参照し、必要な部分だけをモデル属性に設定することができます。

backbone_test_user.php

ユーザーリソースを表します。

Collection.fetch()により送信されたGETパラメータ(ユーザーID)を取得し、値が無ければ全ユーザーを返し、値があればIDに該当するユーザーをJSONで返します。
サンプルのため、getUserListの中で適当にユーザー配列を作っていますが、ユーザー情報をデータベースから取得してユーザー配列を作るというのがよくあるパターンでしょう。

 

まとめ

Backbone.jsのCollectionとModelを連携させて、GETリクエストの結果得られたJSON文字列を一覧表示するサンプルでした。

JSONの形式がどのような形であっても、Collectionのparseを使うことで必要な要素のみをModelに反映させられます。

一覧ですから、ページネーションも必要だよねーとかあると思うのですが、そうするともう少し手を加える必要があるので、それはまたの機会にw

コメントを残す

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

Post Navigation