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

Question

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

描述它的最简单方法:

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

我想要的高级 View :

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

更底层的想法

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

那么，我所描述的情况在前端世界中存在吗？

Answer 1

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

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

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

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

希望这对您有所帮助。