在JavaScript+；jQuery web应用程序

我正在构建一个web应用程序，在表中显示客户列表。表中大约有15列包含这些客户的不同数据位。表上的单元格经常接收用户输入以更新其值

在页面加载时，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的.data（）方法将行本身链接回myCustomerList[I]：

$('#tbl_customer_list tr:last').data('cust_data',myCustomerList[i]); $（'tbl#u 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); }); $（“#tbl_客户列表tr:last td:last a”）。在（'click'，函数（事件）{ custList.cellEvent.status.openDialog（此事件）； }); 然后，事件处理函数使用jQuery.data（）引用回我的全局数据对象：

custList.cellEvent.status.openDialog=函数（oLink，事件）{ var oCustData=$（oLink）.closest（'tr'）.data（'cust_data'）； //更新全局数据对象 oCustData.status=oLink.value； } 我有单独的代码来协调对全局数据对象所做的更改与数据库表上的数据

如果以上内容让您感到困惑，那么本页将很好地概述我尝试采用的客户端MVC方法：

因此，有两个问题：

将模型数据（浏览器端）链接到页面上各种UI组件的更好方法是什么？请记住，我使用.data（）在表行DOM元素和全局数据对象之间创建链接

组织/存储模型数据的更好方法是什么（即myCustomerList）

我现在所做的工作是可行的，但它似乎有点不正常，而且我正在污染全局名称空间。如果我们不得不回到这个页面，添加独立于客户列表的小部件，我不知道它的可支持性和可维护性如何

---

我一直在考虑为customer list表作为一个整体创建一个类（以及为页面中添加的任何其他新小部件创建一个新类），并将模型数据存储在该类的属性上。但是我想我首先来这里是为了获得关于这方面最佳实践的一些提示。

使用设计用于处理这类事情的框架，比如，等等

---

我们在我工作的地方使用主干网来处理所有这些东西——它与jQuery集成得非常好。

我想你应该看看这个：

这是一个模块化的模式来处理网站的各个部分。这种模式使网站的各个部分相互独立。每个模块都可以有自己的MVC并存储自己的状态。模块没有应用程序的完整逻辑。它由沙盒API和核心API处理

---

据我所知，您可以使用AJAX将表的数据从服务器加载到表中。我建议你做的是把这个表变成一个独立的模块

当它接收到AJAX数据时，将其存储在对象中

然后，基于该对象渲染表，将数据存储到表中。您在表中输入的只是可视数据。实际数据保留在之前的对象中

无论何时单击项目，其中的数据都是对您放入的原始对象的精确引用。对其所做的任何操作都会影响原始对象

---

Boris Moore目前正在研究一种“官方”的jQueryUI数据绑定和呈现方式。它已经可以使用了，很快就要测试了。

我被纠正了，我不知道使用

.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; }