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. Simplest possible way to descr

Solution 1:

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);

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.

Solution 2:

This is not an answer, but a larger comment. It might help to write the API you want to use, such as:

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.

Is this what you are trying to do?

A quick google search turns up: http://api.jquery.com/bind/

It might be interesting to make a delegate to jQuery's bind, which doesn't see to hard to do.

Solution 3:

Knockout looks like it does the job you are looking for.