javascript - 如何保持 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>

HTML 元素是从 js 动态渲染的，与此元素关联的 javascript 对象如下:

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

现在假设我动态获取这个对象，然后在用户对 HTML 元素(文本区域和选择)进行更改后，我需要将此数据发布回服务器。

因此，用户更改了文本区域内容，并选择了与之前选择的选项 1 不同的选项。我现在所做的只是再次从 DOM 中获取所有数据并将其发送到服务器。

随着我的代码不断增长，我注意到这种方法非常糟糕，我开始考虑我的 js 对象(objectData)需要与 HTML 元素处于同步模式的方法，因此每当用户更改 textarea 内容，objectData.textareacontent 将随着用户交互而动态更改，然后而不是从 DOM 收集所有内容(因为如果我有 30 或 100 个选择，每个选择有 50 个选项，那么从它们中收集值将是噩梦般的。而且 DOM 很慢)。然后只需将 objectData 发送到服务器即可。

我正在这里寻找最佳实践，如果有一个简单的例子，我们将不胜感激。我还注意到观察者模式

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://jsfiddle.net/t1chz62L/1/