テーブルに顧客のリストを表示するWebアプリケーションを構築しています。表には、これらの顧客に関するさまざまなデータを含む約15の列があります。表のセルは頻繁にユーザー入力を受け取り、値を更新します。JavaScript + jQuery WebアプリケーションでモデルデータとUIをリンクするためのベストプラクティス
ページが読み込まれると、Webアプリケーションは、すべてのアクティブな顧客のうち適切なサブセットを取得するための修飾子付きAJAXリクエストを送信します。 JSONは返され、オブジェクトのグローバル配列に拡張されます。このグローバルなオブジェクト配列の各項目は、表の行を表します。var myCustomerList = [{customer_data_object_1}、{customer_data_object_2}、{customer_data_object_3}]。
ページのHTMLは、JavaScript、jQuery、およびmustache.jsテンプレートを使用して生成されます。 JavaScriptは、グローバルデータオブジェクト（すなわち、myCustomerList [i]）をループし、行を生成する。 IはmyCustomerListに後列自体をリンクするためにjQueryの.DATA（）メソッドを使用して[I]：
$('#tbl_customer_list tr:last').data('cust_data',myCustomerList[i]);
各セルはjQueryのを使用して行に付加されているように、私はUIコントロールにイベントをバインド：
$('#tbl_customer_list tr:last td:last a').on('click',function(event) {
custList.cellEvent.status.openDialog(this,event);
});
私はDBのテーブル上のデータとグローバルデータオブジェクトに対して行われた和解の変更のために別々のコードを持って
custList.cellEvent.status.openDialog = function(oLink,event) {
var oCustData = $(oLink).closest('tr').data('cust_data');
//update the global data object
oCustData.status = oLink.value;
}
：
イベント処理関数は、jQueryの.dataセクションを（）を使用して、戻って私のグローバルデータオブジェクトへの参照してください。 。 https://sites.google.com/site/jollytoad/mvcusingjquery
ので、二つの質問：より良い
- は何上記のあなたを混同している場合
は、このページでは私が取るしようとしているクライアントサイドMVCのアプローチの良い概要を説明しますモデルデータ（ブラウザ側）をページ上のさまざまなUIコンポーネントにリンクする方法？テーブル行DOM要素とグローバルデータオブジェクトの間にリンクを作成するには、.data（）を使用していることを覚えておいてください。
- モデルデータ（つまり、myCustomerList）を整理して保存するにはどうすればよいですか？
私が今やっていることは動作しますが、ちょっとハッキリしているようで、グローバルな名前空間を汚染しています。このページに戻って顧客リストとは独立したウィジェットを追加しなければならない場合、私はどのようにサポートして維持できるか分かりません。
私は顧客リストテーブル全体（およびページに追加された他の新しいウィジェットの新しいクラス）のクラスを作成し、そのクラスのプロパティにモデルデータを保存することを検討してきました。しかし、私はこの分野のベストプラクティスについていくつかのヒントを得るためにまずここに来ると思った。
新しいMyView（{model：mymodel}）でビューの新しいインスタンスを作成したとき、 – tkone