How to keep html DOM elements synchronized with the associated javascript object? Best practices

Question

Lets say that I've the following structure:

<textarea id="content"></textarea>
<select id="sel">
    <option value="1">value1</option>
    <option value="2">value2</option>
    <option value="3">value3</option>
</select>

The HTML elements are dynamically rendered from the js and the associated javascript object with this elements is as follow:

var objectData = {
    "textareacontent"   : "some random content"
    "selectData"        : "1"
}

Now lets say that i'm getting this object dynamically and then I need to post this data back to the server, after the user make changes to the HTML elements (the textarea and the select).

So the user changes the textarea content and the choose different option from the previous selected option 1. What I'm doing now is just take all the data again from the DOM and send it to the server.

As my code keep growing I'm noticing that this approach is very bad and I'm starting to think about the approach that my js object(objectData) needs to be in synchronized mode with the HTML elements, so whenever the user changes the textarea content, the objectData.textareacontent will dynamically change with the user interaction and then instead of collecting everything from the DOM (Because if I have lets say 30 or 100 selects with 50 options each, collecting the value from them will be nightmarish. And the DOM is SLOW). And then just send the objectData to the server.

I'm looking for the best practices here and a simple example will be greatly appreciated. Also I've noticed the observer pattern

Object.observe

which seems good, but looks like it is only for when changing the js object state and not keeping async the object state and the associated HTML Element (or I'm missing something)

See http://stackoverflow.com/questions/16483560/how-to-implement-dom-data-binding-in-javascript — Benjamin Gruenbaum, Aug 28 '14 at 08:48
I'd recommend taking a look at [knockout](http://knockoutjs.com). It's a fairly lightweight library for doing exactly this. There are others also, but knockout is the one I'm familiar with. — James Thorpe, Aug 28 '14 at 08:51
This is exactly what I'm after... "Data binding" another "25-dollar term for a 5-cent concept". Thanks for the links! — sla55er, Aug 28 '14 at 08:56

score 1 · Answer 1 · answered Aug 28 '14 at 08:56

You have to connect the DOM elements and the data structure in some way. If you have an input element, you know that you can access it's current value via the value-attribute. You now have to add a click- or change- listener to the input (DOM element) element to update your data structure. Because this is always the same for input elements you may write a generic code that does that.

register(inputElement, function(value) {
   myDataStructure.value1 = value;
});

register will that add the events to inputElement and calls the function(value) with the updated value.

This will be still pretty hard to manage if i have 100 selects. The accepted answer is the one that I'm after. Thanks anyway — sla55er, Aug 28 '14 at 09:08

score 1 · Accepted Answer · answered Aug 28 '14 at 08:58

1

As per my comment, after including the knockout library, this becomes as simple as:

<textarea id="content" data-bind="value: textareacontent"></textarea><br />
<select id="sel" data-bind="value: selectData">
    <option value="1">value1</option>
    <option value="2">value2</option>
    <option value="3">value3</option>
</select><br />

With this JavaScript:

var objectData = {
    "textareacontent"   : ko.observable("some random content"),
    "selectData"        : ko.observable("1")
}

ko.applyBindings(objectData);

JSFiddle here: http://jsfiddle.net/t1chz62L/1/

answered Aug 28 '14 at 08:58

James Thorpe

31,411
5
72
93

I will accept this answer, since that is what I'm after. Although I'm going to implement something pretty straight forward with as less footprint as possible using this http://www.lucaongaro.eu/blog/2012/12/02/easy-two-way-data-binding-in-javascript/ – sla55er Aug 28 '14 at 09:03
1

No problems. Do take 5 minutes of your day to look at some of the examples in the frameworks though - they go beyond the basics here and allow very complex designs to be created easily through templating etc. Well worth learning the ins and outs for future stuff. – James Thorpe Aug 28 '14 at 09:09
Thanks for that. I will do more than 5 minutes on the weekend. Cheers! – sla55er Aug 28 '14 at 10:35

How to keep html DOM elements synchronized with the associated javascript object? Best practices

2 Answers2