バックボーンを使用したシングルページアプリのUI状態を処理する方法

Question

私は従来の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状態の管理をどのように処理するのでしょうか？どんなアイデアや提案に感謝します。

ありがとう！

Answer 1

私はあなたがした質問を正確に持っていました、そして私はあなたに秘密を知らせます：チート。

ここにあるのは、2つの異なるアプリケーションレイヤーと、それらについての混乱です。最初のレイヤーは、システム内のTo DOオブジェクト間の関係です。これらは、従来のオブジェクトリレーショナルモデルに保存し、他のRESTFULアプリケーションと同じように作成/取得/更新/削除を作成します。

2番目のレイヤーは、これらのオブジェクトの表示とオブジェクト自体の関係です。あなたが保存したい状態がそこにあります。重要な洞察は次のとおりです。すべてのオブジェクトがシステムに取得、配置、または投稿されている限り、一意のIDがある限り、2番目のレイヤーは最初のレイヤーとは完全に独立しています。

最初のレイヤーは、「To-Do Manager」のRestful APIです。 2つ目は、このプレゼンテーションにユニークなものです。最初のデータとの関係は希薄です。だから私がやったことは次のとおりです。私はそのプレゼンテーションレイヤー状態をJSONオブジェクトにエンコードし、ユーザーのプロフィールの8ビットのクリーンテキストフィールドに書きました。ユーザーが状態を変更するたびに、私はそれをします。

アプリがロードされると、REST APIとプレゼンテーションレイヤー情報のデータの大部分がロードされ、意味のないプレゼンテーションレイヤーに廃棄し、BackBone.Historyを起動してプレゼンテーションを初期化します。そして、サーバーを知る必要はありません どれか クライアントの仕組みについての詳細。クライアントがあなたの安らかな専門用語を話す限り、それはあなたのオブジェクトやその関係に影響を与えることなく、そのテキストフィールドに「この特定のクライアントが気にかけている」「その他のもの」を救うことができます。