将 UI 元素与支持 javascript 对象链接的最佳方式答案

【问题标题】：Best way to link UI elements with backing javascript objects将 UI 元素与支持 javascript 对象链接的最佳方式
【发布时间】：2011-01-19 12:19:39
【问题描述】：

这是a post I made last week 的改写。我很惊讶我没有得到更多的回应，我想也许我没有很好地描述/命名它。

最简单的描述方式：

对于 javascript/dhtml 有类似 spring:bind 的东西吗？

我想要的高级视图：

在我的应用程序中，我有一个通过 ajax 加载的“订阅者”对象列表。我想动态绘制代表这些对象的 UI 元素，并注册事件处理程序，以便在用户编辑视图时更新支持对象。

更底层的想法

在浏览器中动态显示 js 数据是微不足道的。为每种类型的数据编写事件处理程序也不是什么大问题，但是有点乏味。我觉得应该有一些库可以充当模板系统，动态创建 HTML 表单元素，用我的 js 对象中的数据填充占位符，但是当用户进行编辑时转到更新支持对象的附加步骤表单元素。我知道的最接近的例子是后端技术，Spring (java framework) binding 功能，其中模板中的表单元素根据系统进行编码，它们会自动链接到服务器上的模型对象。

那么，我所描述的是否存在于前端世界中？

【问题讨论】：

ew... 这似乎是错误的。您希望何时更新 js 对象？在峰会上？改变？在按键上？是否应该像输入一样生成标签？标签中应该有什么文字？只是属性名称？
为什么错了？同样的方法适用于服务器端技术。按照我的想象，所有格式都将由模板确定。对象将在按键时更新，但在用户单击“保存”按钮之前不会发生服务器通信。

标签： javascript ajax data-binding

【解决方案1】：

我不知道您描述的那种库，但 jQuery 提供了非常有用的data() 函数，它允许您使用键将任意数据段与 DOM 元素相关联。添加新元素并将数据与其关联可能如下所示：

var elem = $('<div class="subscriber">...</div>').appendTo(someContainer);
elem.data('yourKey', backingObject);

使用事件委托（例如，live() 函数），您可以添加一个对订阅者对象的所有图形表示有效的事件处理程序，无论它们是否已经存在。

$('.subscriber').live('click', function(e) {
    var backingObject = $(this).data('yourKey');
    // Now call some methods on the backing object
});

希望这对您有所帮助。

【讨论】：

谢谢汤姆，不过我懒得写“// 现在调用一些方法”的东西了！我希望所有这些都自动为我连接起来！假设“订阅者”有名字、姓氏和电子邮件地址。我不想编写将值从“电子邮件地址”gui元素复制到支持对象的代码。当然，这样的技术似乎应该已经存在了。
我明白了。表单生成，包括输入处理例程。也许将这方面添加到您的问题中，我无法推断。有趣，整件事。
感谢您的反馈。我已经编辑了这个问题。希望现在更清楚一点。

【解决方案2】：

这不是一个答案，而是一个更大的评论。编写您想要使用的 API 可能会有所帮助，例如：

var jsObj = {};

jsObj.bind(document.getElementById("firstName"), "onchange");
//binds the data from the firstName element to the jsObject in property "firstName" during the onchange event.

这是你想要做的吗？

出现了一个快速的谷歌搜索： http://api.jquery.com/bind/

为 jQuery 的绑定创建一个委托可能会很有趣，这看起来并不难。

【讨论】：

我想要像 Spring 绑定一样工作的东西。创建一个模板。为模板中的元素赋予属性，将它们链接到数据模型，呈现模板，自动附加事件处理程序。所以我的模板中可能有类似
#address.street#
的东西。模板渲染器将替换 ## 文本，并将事件处理程序附加到包含的 div，这将 a) 使其在单击时可编辑 b) 将对文本的更改传播回 back 对象。

【解决方案3】：

Knockout 看起来可以满足您的需求。

【讨论】：