著者 Christophe Coenraets

Christophe Coenraets

目次

作成日

17 June 2013

必要条件

この記事に必要な予備知識

JavaScriptの基礎の理解第1部「はじめに」および第2部「CRUD」をまだ読んでいない場合は、この記事を読み進める前に第1部および第2部を読むことをお勧めします。

サンプルファイル：

ユーザーレベル

すべて

原文 作成日: 2012/3/19

「Backbone.js Wine Cellar tutorial – Part 3: Deep linking and application states」

「第1部：はじめに」では、ワインセラーアプリケーションの基本インストラクチャーを構築しました。「第2部：CRUD」では、ワインを新規登録、更新、削除（CRUD = create, update, and delete）する機能を追加しました。

アプリケーションには、まだいくつか問題があります。それらはすべてディープリンクに関係しています。アプリケーションのURLとアプリケーションの状態は常に同期している必要があります。そうすることで、開発者やユーザーは、アプリケーションの実行中に任意の時点でアドレスバーからURLを取得し、そのURLを使用または共有することでアプリケーションを正確に同じ状態に戻すことができます。

第3部では、ワインセラーアプリケーションにディープリンクのサポートを実装します。

第3部ではこのアプリケーションを開発します。このアプリケーションのオンライン版では、ワインの新規登録、更新、削除などの機能は無効になっています。

問題点：

  1. 特定のワインをアプリケーション内のリストから選択します。このときのURLは、http://www.coenraets.org/backbone-cellar/part2/#wines/[id]です。
  2. ここで、次のいずれかの操作を、実行中のアプリケーション内で行います。
    • アドレスバーのURLをコピーし、別のブラウザーウィンドウまたはタブから、そのURLにアクセスを試みる。
    • 単に、ブラウザーの更新ボタンをクリックする。

データのない空の画面が表示されます。デバッグコンソール（Chromeの開発ツールなど）には、以下のようなメッセージが表示されます。

167 Uncaught TypeError: Cannot call method 'get' of undefined

以下に示すコードを確認してみましょう。

問題は20行目にあります。ここでは、ワインのコレクション（this.wineList）が既に存在し、そのリストから特定のワインを「取得（get）」することが前提でコードが記述されています。このコードは、ユーザーがデフォルト（“”）ルートでアプリケーションを開始する場合に機能しますが、wines/:idルートで開始した場合は、this.wineListが存在しません。以下のオプションで説明するように、この問題を解決するにはいくつかの方法があります。 

要求された項目を直接取得するように、wineDetails関数に変更を加えることができます。

これでワインの詳細情報がフォームに読み込まれるようになりますが、アプリケーションをwines/:idルートで開始した場合、依然としてワインリストは表示されません。

リストが表示されない場合は、次のコード行を追加してリストを読み込むことができます。

ただし、コレクション内のワインのモデルと個別に取得したワインのモデルはそれぞれ異なるオブジェクトです。つまり、データバインディングとViewの同期化は期待どおりには機能しません。

wineDetails関数にコレクションが存在するかどうかをチェックすることはできます。存在する場合は、単に要求された項目を「取得」し、上述のとおりに表示します。存在しない場合は、要求されたIDを変数に格納し、既存のlist()関数を呼び出してリストにデータを表示します。その後で、list()関数に変更を加えます。サーバーからリストを取得するときに（成功時）、要求されたIDがあるかどうかチェックします。IDが見つかった場合には、wineDetails関数を呼び出して対応する項目を表示します。

問題2：ユーザーがワインを新規登録し、保存した後にURLを更新する

第3部ではこのアプリケーションを開発します。このアプリケーションのオンライン版では、ワインの新規登録、更新、削除などの機能は無効になっています。

問題点：

  1. ワインを新規登録します。
  2. 「Save」ボタンをクリックします。新規登録したワインに割り当てられたIDがフォームのフィールドに表示されます。しかし、URLはhttp://localhost/backbone-cellar/part2/のまま変わりません。本当ならhttp://localhost/backbone-cellar/part2/#wines/[id]になるはずです。

ルーターのnavigate関数を使ってURLを変更することで、この問題は簡単に解決できます。2番目の引数（false）は、そのルートを「実行」したいのではなく、単にURLを変更したいだけであるということを示しています。

問題3：ワインを新規登録したときにURLを更新する

第3部ではこのアプリケーションを開発します。このアプリケーションのオンライン版では、ワインの新規登録、更新、削除などの機能は無効になっています。

問題点：

  1. リストからワインを選択します。
  2. このときのURLはhttp://localhost/backbone-cellar/part2/#wines/[id]です。
  3. 「Add Wine」ボタンをクリックします。ワインを新規登録するための空白のフォームが表示されますが、URLは元のままです（http://localhost/backbone-cellar/part2/#wines/[id]）。すなわち、アプリケーションの現在の状態が反映されていません。

この問題を解決するには、新しい「ルート」を追加します。

ルーターのnewWineメソッドは次のようになります。

HeaderView newWine()メソッドを次のように書き換えます。

次のステップ

GitHubの最新のコードをダウンロードします。さらに、このシリーズの「後書き」として、本シリーズの終了後に学習した2、3の課題とこのアプリケーションの改良版をブログに投稿しています。ブログの投稿「Backbone.js: Lessons learned and improved sample application」の記事をどうかお読みください。