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

Posted 2023-02-22

【中文标题】如何保持 html DOM 元素与关联的 javascript 对象同步？最佳实践

【英文标题】：How to keep html DOM elements synchronized with the associated javascript object? Best practices

【发布时间】：2014-10-22 01:30:39

【问题描述】：

假设我有以下结构：

<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 元素（或者我遗漏了一些东西）

【问题讨论】：

见***.com/questions/16483560/…

我建议您查看knockout。这是一个相当轻量级的库，可以做到这一点。还有其他的，但淘汰赛是我熟悉的。

这正是我所追求的……“数据绑定”另一个“5 美分概念的 25 美元术语”。感谢您的链接！

【参考方案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/

【讨论】：

我会接受这个答案，因为这就是我所追求的。尽管我将使用lucaongaro.eu/blog/2012/12/02/…

以尽可能少的占用空间来实现一些非常简单的东西

没问题。不过，请务必花 5 分钟时间查看框架中的一些示例 - 它们超越了这里的基础知识，并允许通过模板等轻松创建非常复杂的设计。非常值得学习未来东西的来龙去脉。

谢谢。周末我会做5分钟以上。干杯！

【参考方案2】：

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

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

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

【讨论】：

如果我有 100 个选择，这仍然很难管理。接受的答案是我所追求的答案。还是谢谢