將UI與模型數據鏈接到JavaScript + jQuery Web應用程序的最佳實踐

我正在構建一個Web應用程序，該應用程序顯示錶中的客戶列表。表格上大約有15列包含這些客戶的不同位數據。表格上的單元格經常接收用戶輸入以更新其值。將UI與模型數據鏈接到JavaScript + jQuery Web應用程序的最佳實踐

在頁面加載時，Web應用程序發送帶有限定符的AJAX請求以從所有活動客戶中檢索適當的客戶子集。 JSON在全局對象數組上返回並擴展。此全局對象數組中的每個項表示該表上的一行：var myCustomerList = [{customer_data_object_1}，{customer_data_object_2}，{customer_data_object_3}]。

然後通過JavaScript，jQuery和mustache.js模板生成頁面的HTML。 JavaScript將遍歷全局數據對象（即myCustomerList [i]）並生成行。我使用jQuery的。數據（）方法將行本身鏈接回myCustomerList [I]：

$('#tbl_customer_list tr:last').data('cust_data',myCustomerList[i]);

我事件綁定到UI控件每個小區使用jQuery附加到行：

 
$('#tbl_customer_list tr:last td:last a').on('click',function(event) { 
    custList.cellEvent.status.openDialog(this,event); 
});

事件處理函數，然後使用jQuery的.data（）是指回到我的全局數據對象：

 
custList.cellEvent.status.openDialog = function(oLink,event) { 
    var oCustData = $(oLink).closest('tr').data('cust_data'); 

    //update the global data object 
    oCustData.status = oLink.value; 
}

我有協調全局數據對象進行與數據庫表中的數據的變化獨立的代碼。

如果上面讓你感到困惑，這個頁面提供客戶端MVC方法我試圖採取的一個很好的概述：https://sites.google.com/site/jollytoad/mvcusingjquery

於是，兩個問題：

什麼是更好的將模型數據（瀏覽器端）鏈接到頁面上的各種UI組件的方式？請記住，我正在使用.data（）在表格行DOM元素和全局數據對象之間創建鏈接。
什麼是組織/存儲模型數據（即myCustomerList）的更好方法？

我現在正在做的工作，但它似乎有點hacky，我污染全球命名空間。我不知道如果我們必須回到此頁面並添加獨立於客戶列表的小部件，它將會如何支持和維護。

我一直在考慮爲整個客戶列表表格（以及添加到頁面上的任何其他新窗口小部件的新類）創建一個類，並將該模型數據存儲在該類的屬性中。但我認爲我會先來這裏獲得關於這方面最佳實踐的一些技巧。

來源

2012-02-20 Elliot B.

使用設計來處理這種事情的框架，如Backbone,Spine,JavaScriptMVC等等。

我們使用Backbone來處理所有這些東西 - 它與jQuery很好地集成在一起。

來源

2012-02-20 21:29:53 tkone

當您使用'new MyView（{model：mymodel}）創建視圖的新實例;' – tkone 2012-02-21 03:39:52

我想你應該在這個代替看看：

http://addyosmani.com/largescalejavascript/

這是一個模塊化的模式來處理該網站的各個部分。這種模式使網站的一部分相互獨立。每個模塊都可以擁有自己的MVC並存儲它自己的狀態。模塊沒有應用程序的完整邏輯。它由沙箱API和核心API處理。

據我所知，你使用AJAX將表中的數據從服務器加載到表中。我建議你做的是使該表成爲一個獨立的模塊。

當它接收到AJAX的數據，將其存儲在對象
後，使您的表基於該對象上，將數據存儲到表中。你放在桌上的只是視覺數據。實際的數據仍然保留在那個對象中。
無論您何時單擊某個項目，其中的數據都是您輸入的原始對象的確切參考。無論您對它做什麼操作都會影響原始對象。

來源

2012-02-20 21:33:08 Joseph

更新了我的答案。嘗試檢查。 – Joseph 2012-02-20 22:22:02

我糾正了，我不知道使用'.data（）'存儲的數據可以保存對原始對象的引用。我只是在這裏驗證：http://jsfiddle.net/LnHac/ - 所以無論你對存儲在元素中的數據做什麼，它都會將它映射到最初提到的全局對象。 – Joseph 2012-02-20 23:08:37

鮑里斯摩爾目前正在研究JsViews & JsRender這是'官方'jQueryUI數據綁定和渲染方式。它已經可用，即將推出beta版。

來源

2012-12-27 14:25:24 Timur

將UI與模型數據鏈接到JavaScript + jQuery Web應用程序的最佳實踐

回答

相關問題