binding JSON to DOM

binding JSON to DOM


Hi All,
I'm new to the discussion boards so my apologies if this question has
been answered, (I searched but maybe I wasn't calling it the right
thing.)
I'd like to create a JSON backing data structure that will update a
DOM element when updated itself. I've seen tons of examples on how to
create custom events to fire when the DOM changes, but not when the
JSON object is modified.
I have a simple Observer/Observable pattern setup to update the DOM
whenever one of the "registered" elements' backed data is modified,
but it far from elegant.
Is there a simple solution to this?
ex:
data = {
name: "Cory",
hobbies: "coding",
age: 28
}
and
<div bindname="name">Fred</div>
<textarea bindname="hobbies">cutlery</textarea>
<input type="text" bindname="age" value="22"></input>
when any of the JSON fields change, it updates the DOM.