私はAngularJSのコンテキストでこれを求めていますが、この質問は実際にどの言語にも適用できます。そのため、Webアプリケーションでは、サーバーからいくつかのデータ（HTTPリクエスト）を取得し、そのデータをUIに表示する必要があります。データモデルとビューモデルを適切に分離する
したがって、アプリケーションで書籍のリストが表示されているとします。私たちのプロセスは次のようになります。
- はすべて私たちの本のリストを取得するには/ API /冊にGETリクエストを実行します
- （オプション）クライアント・データ・モデルに、サーバー・データ・モデルを変革
- バインドを必要に応じて
$scopeのモデルはので、彼らは$scope上のモデルを通じてビュー - 反復からアクセスできます。この時点で、HTML
に表示し、我々は、単純なLISを持って言うことができますその横に、このような本のタイトルのチェックボックスのT：あなたが見ることができるように
<ul>
<li ng-repeat="book in vm.Books">
<input type="checkbox" ng-model="<HERE>" name="my-books" />
<label>{{book.title}}</label>
</li>
</ul>
は、このテンプレートでは、我々はページに表示するために、book.titleを参照します。ただし、ngModelが不明であることがわかります。ここで私は何をすべきか分かりません。簡単な解決策は、UIで使用するUIモデルをタックすることです。これは、上のステップ2で、すべての単一のモデルにbook.UI = {}を実行し、そのモデルをサーバーに送り返す必要があるときには、バックアップをクリーニングするためにdelete book.UIを実行する必要があることを意味します。これを行う
は、私たちのテンプレートは次のように見えるようにできるようになる：本は、チェックボックスの入力を介して選択されたときに
<ul>
<li ng-repeat="book in vm.Books">
<input type="checkbox" ng-model="book.UI.isSelected" name="my-books" />
<label>{{book.title}}</label>
</li>
</ul>
今、私たちは制御することができます。この作業は問題ありませんが、私たちの懸念を十分に分けるわけではなく、このパターンの使用には副作用があります。
私は、実装固有のものではないこの問題を解決することができ抽象的なデザインパターンがあると確信している、私はただの自分自身を認識していないです。フロントエンドでこのような柔軟性を得る方法についてアドバイスをいただいていますが、ビューモデルとデータモデルを完全に分離しているため、「クリーンアップ」作業を行う必要はありません。