如何保持 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 元素（文本区域和选择）进行更改后，我需要将此数据发送回服务器。

因此，用户更改了 textarea 内容并选择了与之前选择的选项 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/

Answer 2

您必须以某种方式连接 DOM 元素和数据结构。如果你有一个输入元素，你知道你可以通过 value-attribute 访问它的当前值。您现在必须向输入（DOM 元素）元素添加一个单击或更改侦听器来更新您的数据结构。因为这对于输入元素总是相同的，所以您可以编写一个通用代码来执行此操作。

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

注册会将事件添加到 inputElement 并使用更新的值调用函数（值）。