バックボーンを使用したシングルページアプリのUI状態を処理する方法
-
22-10-2019 - |
質問
私は従来のWeb開発の背景から来て、ASP.NET、さらにはサーバー側のMVCを使用しているので、私と一緒に我慢してください。 JavaScriptコードを整理してUIを構築するために、BackBone.jsを使用して非常にインタラクティブなシングルページアプリケーションを構築しようとしています。
私は、いくつかの概念や、UIのコンポーネントを構築するためのアプローチに問題があり、特定の側面を処理する方法を決定しています。私は、私の質問と議論の基礎として、この単純化されたスクリーンショットを使用するつもりです。
例として(もちろん)「To Do」アプリケーションを使用しましょう。UIは非常に簡単です。次の「コンポーネント」があります...
- 現在選択されている基準に一致する現在のTO-DOSセットを示す結果リスト
- 私のTo Doリストのリスト(個人、仕事、ブログプロジェクト)
- 期日フィルターのリスト(今日、明日、今週、来週)
- タグのリスト(バグ、機能、アイデア、フォローアップ)
- 検索ボックス
望ましい機能
- 検索条件が変更されたときはいつでも結果を更新します(リストを選択し、適切なデータを選択し、1つ以上のタグを選択し、検索テキストを入力するなど)
- ユーザーはリストを編集、追加、削除できます。 (このモックアップでは実際には表示されていません)
- ユーザーはタグを編集、追加、削除できます。 (このモックアップでは実際には表示されていません)
- ユーザーは、To Doアイテムを編集、追加、削除できます。 (このモックアップでは実際には表示されていません)
データモデル
「データ」に関連する「データ」であるモデルがいくつかあります。これらは簡単に識別できました。
- Todo(単一のTo Doアイテムを表します)
- docollection(やることのコレクションを表します)
- Todolist(単一のToDoリストを表す)
- todolistCollection(To Doリストのコレクションを表します)
- タグ(単一のタグを表す)
- TagCollection(タグのコレクションを表す)
UI状態を保存する方法は?
これは私が問題を抱えているところです。現在選択されているメニュー(左側)のどのアイテムを表示したいと思います。確かにイベントを聞いて、選択したときに「選択された」クラスをアイテムに追加することができますが、「一度に1つのリストのみを選択できる」などのルールもありますが、「任意の数のタグ」をで選択できます。時間。また、To-Doリストメニューとタグメニューは動的であるため、すでにTodolistCollectionおよびTagCollectionモデルに関連付けられています。これらは、これらの「データモデル」の状態に従ってレンダリングされます。
それでは、バックボーンを使用して、これらすべての異なるビューに対してこのUI状態の管理をどのように処理するのでしょうか?どんなアイデアや提案に感謝します。
ありがとう!
解決
私はあなたがした質問を正確に持っていました、そして私はあなたに秘密を知らせます:チート。
ここにあるのは、2つの異なるアプリケーションレイヤーと、それらについての混乱です。最初のレイヤーは、システム内のTo DOオブジェクト間の関係です。これらは、従来のオブジェクトリレーショナルモデルに保存し、他のRESTFULアプリケーションと同じように作成/取得/更新/削除を作成します。
2番目のレイヤーは、これらのオブジェクトの表示とオブジェクト自体の関係です。あなたが保存したい状態がそこにあります。重要な洞察は次のとおりです。すべてのオブジェクトがシステムに取得、配置、または投稿されている限り、一意のIDがある限り、2番目のレイヤーは最初のレイヤーとは完全に独立しています。
最初のレイヤーは、「To-Do Manager」のRestful APIです。 2つ目は、このプレゼンテーションにユニークなものです。最初のデータとの関係は希薄です。だから私がやったことは次のとおりです。私はそのプレゼンテーションレイヤー状態をJSONオブジェクトにエンコードし、ユーザーのプロフィールの8ビットのクリーンテキストフィールドに書きました。ユーザーが状態を変更するたびに、私はそれをします。
アプリがロードされると、REST APIとプレゼンテーションレイヤー情報のデータの大部分がロードされ、意味のないプレゼンテーションレイヤーに廃棄し、BackBone.Historyを起動してプレゼンテーションを初期化します。そして、サーバーを知る必要はありません どれか クライアントの仕組みについての詳細。クライアントがあなたの安らかな専門用語を話す限り、それはあなたのオブジェクトやその関係に影響を与えることなく、そのテキストフィールドに「この特定のクライアントが気にかけている」「その他のもの」を救うことができます。