javascript - 在 JavaScript + jQuery 网络应用程序中将 UI 与模型数据链接的最佳实践

Question

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

在页面加载时，网络应用程序发送带有限定符的 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]);

我将事件绑定(bind)到 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

那么，两个问题:

1. 将模型数据(浏览器端)链接到页面上的各种 UI 组件的更好方法是什么？请记住，我正在使用 .data() 在表行 DOM 元素和全局数据对象之间创建链接。
2. 组织/存储模型数据(即 myCustomerList)的更好方法是什么？

我现在所做的工作有效，但它似乎有点老套，而且我正在污染全局命名空间。我不知道如果我们必须返回此页面并添加独立于客户列表的小部件，它的可支持性和可维护性如何。

我一直在考虑为整个客户列表创建一个类(并为添加到页面的任何其他新小部件创建一个新类)并将模型数据存储在该类的属性上。但我想我应该先来这里，以获得有关该领域最佳实践的一些提示。

Answer 1

使用专为处理此类事情而设计的框架，例如 Backbone , Spine , JavaScriptMVC等等。

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