如何保持html DOM元素与关联的javascript对象同步？最佳实践

Question

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

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

我正在这里寻找最佳实践，一个简单的例子将非常赞赏。我还注意到观察者模式

Object.observe

这看起来很好，但似乎只适用于更改js对象状态并且不保持对象状态和关联的HTML元素的异步（或者我遗漏了一些东西）

Answer 1

根据我的评论，在包含了knockout库之后，这就变得非常简单：

<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 />

使用此JavaScript：

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

ko.applyBindings(objectData);

JSFiddle此处:http://jsfidle.net/T1chz62l/1/