web-dev-qa-db-ja.com

Backbone.js-状態情報を保存する場所？

私は Backbone.js を初めて使用するので、状態変数が存在する場所を見つけようとしています。私のユースケース：

本の閲覧インターフェイスを提供するアプリケーションがあります（私は知っています、古典的な例ですよね？）。私のモデルはBookとPageで、それぞれにコレクションクラスがあります。アプリケーションの構造は、おおよそ次のようになります（ASCII visioを許してください）：

+------------+
| Controller |
+------------+
    |      Views                 Models
    | +--------------+      +----------------+
    |-|  IndexView   |------| BookCollection |
    | +--------------+      +----------------+
    |                               |
    | +--------------+      +----------------+
    +-|   BookView   |------|     Book       |
      +--------------+      +----------------+
       |                            |
       | +--------------+           |
       |-|  TitleView   |-+         |
       | +--------------+ | +----------------+
       |                  +-|     Page       |
       | +--------------+ | +----------------+ 
       +-|   PageView   |-+
         +--------------+

つまり、Controllerは、モデルに基づく2つのビューIndexViewとBookViewをインスタンス化して調整します。 BookViewは、一連のサブビューをインスタンス化して調整します（実際には、ここに示されている以上のものがあります）。

状態情報には以下が含まれます。

  • 現在の本（ポインタまたはID）
  • 現在のページ（ポインターまたはID）
  • ページ上の画像が表示されるかどうか、他のウィジェットが開いているか閉じているかなど、他のUI状態変数.

私の質問は、この州の情報はどこにあるのでしょうか？可能なオプションは次のとおりです。

  • models、これは状態を認識することができます。データを格納することを目的としているため、これはある程度理にかなっており、ビューは状態変化をリッスンできますが、これが意図されたBackbone.jsパターンに適合していないようで、常に意味があるとは限りません（例：画像をオンにする） PageViewは、現在のページだけでなく、すべてのページに適用されます）

  • 状態情報を保持するための特別なシングルトンモデル。繰り返しになりますが、理にかなっており、簡単に聞くことができます。すべてのビューをバインドできますが、これも標準のMVCの外にあるようです。

  • UI状態を担当するviews-ただし、状態情報を取得するには、ビューがお互いを認識している必要があります。

  • controllerは、状態間でアプリケーションをルーティングする必要があります-これは理にかなっていますが、少し奇妙なラウンドトリップを意味します。 User selects "Show Images" --> View event listener is called --> View informs Controller --> Controller updates state --> Controller updates View（より単純なUser selects "Show Images" --> View event listener is called --> View updatesではなく）

ある意味でこれは一般的なMVCの質問だと思いますが、頭を悩ませています。 アプリケーションのどの部分が現在の状態を保存する必要がありますか？

UPDATE：将来の参考のために、この問題にはグローバルシングルトン状態モデルを使用しました。 UIフローは次のようになります。

  1. ビューUIハンドラーは更新を行うだけですapp.State
  2. 私のルーターもapp.Stateを更新するだけです-それらは本質的に、URLの変更を表示してそれに反応する特殊なビューです
  3. ビューはapp.Stateの変更をリッスンし、それに応じて更新します

私のアプリはオープンソースです Githubのコード を見ることができます。ここで関連する部分は 状態モデル です。これは、URLの状態の（逆）シリアル化を処理するように拡張されています。

javascriptmodel-view-controllerbackbone.js
44
nrabinowitz

現在の状態を保存および説明する状態モデルを作成しないのはなぜですか？私はそれが間違っているとは思いません。現在の状態には複数のモデルが含まれるため、現在の状態を格納および受信するための状態モデルを作成するのが妥当だと思います。

次に、コントローラーは状態モデルと通信して現在の状態を取得できます。ただし、UIの状態は対応するモデルに保存する必要があります。状態モデルは、どのブックとページを認識し、次にブックモデルとページモデルが現在のUI状態を追跡します。

12
Ragnar

バックボーンアプリをバックボーン構成に制限しないでください 。アプリに、Backboneのコンストラクトの1つにうまく適合しない機能が必要な場合は、Backboneにすべてを保持するためだけに1つに統合しないでください。

私はこの backbone boilerplate がこの点で役立つことを発見しました。これはモジュールをセットアップし、Backbone.Eventsを拡張するアプリオブジェクトを提供します（以前にリンクされた記事のように）。このアプリオブジェクトは、インスタンス化されたモデル、ビュー、コントローラー/ルーターを格納するために使用できます。独自のバックボーンモジュールをアプリオブジェクトに追加して、バックボーン構造。

13
tex