与后盾的JavaScript对象链接UI元素的最佳方式 [英] Best way to link UI elements with backing javascript objects

问题描述

这是后我做了上周 。我很惊讶，我没有得到更多的响应，想也许我没有描述/标题非常好。

This is a rephrase of a post I made last week. I was surprised I didn't get more of a response, thinking maybe I didn't describe/title it very well.

简单的方式来描述它：的

有什么样的春：绑定对JavaScript / DHTML？

Is there something like spring:bind for javascript/dhtml?

是我想要的高层视图：的

在我的应用程序，我有我通过AJAX已经加载用户对象的列表。我想提请动态UI元素重新presenting这些对象，并注册事件处理程序，这样，当用户编辑视图中的数据传输对象进行更新。

In my app, I have a list of "subscriber" objects which I've loaded via ajax. I'd like to dynamically draw UI elements representing these objects, and register event handlers so that the backing objects are updated when the user edits the view.

更低水平的想法的

动态显示JS数据在浏览器中是微不足道的。这也是不是一个大问题写事件处理程序为每个类型的数据，但它是一个有点乏味。我觉得应该有一些图书馆在那里，这将表现为一个模板系统，从我的js对象动态创建HTML表单元素，填充占位符数据，但去更新数据传输对象的额外步骤的用户进行编辑时，表单元素。最近的例子我所知道的是后端技术，的春（Java框架）结合的功能，在模板中的表单元素是根据一个系统，它们会自动链接到模型对象在服务器上codeD。

Dynamically displaying js data in the browser is trivial. It's also not a big problem to write event handlers for every type of data, but it's a bit tedious. I feel like there should be some library out there which will behave as a template system, creating HTML form elements dynamically, populating placeholders with data from my js objects, but go to the additional step of updating the backing objects when the user makes edits to the form elements. The closest example I'm aware of is a back-end technology, the Spring (java framework) binding functionality, where form elements in templates are coded according to a system where they're automatically linked to the model objects on the server.

因此​​，没有我描述了在前端的世界存在吗？

So, does what I've described exist in the front-end world?

推荐答案

我不知道你所说的那种库，但jQuery提供了非常有用的数据（）功能，可以让您任意一块数据与DOM元素使用一键关联。它添加了新的元素和相关联的数据可能是这样的：

I do not know about libraries of the kind you described, but jQuery offers the very useful data() function which allows you to associate an arbitrary piece of data with a DOM element, using a key. Adding a new element and associating data with it might look like this:

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

使用事件代表团（例如，生活（）函数），你可以添加一个事件处理程序的有效期为你的用户对象的所有图形重新presentations ，不管他们是否已经存在与否。

Using event delegation (e.g., the live() function), you can add one event handler that is valid for all graphical representations of your subscriber objects, no matter if they already exist or not.

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

希望这有助于你以某种方式。

Hope this helps you somehow.

这篇关于与后盾的JavaScript对象链接UI元素的最佳方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！