javascript - 数据绑定在哪里属于单页应用程序（JS 和 HTML）

我正在尝试编写自己的数据绑定代码，主要是作为一种学习经验，所以我确切地知道发生了什么。应该在哪里指定数据绑定的相关细节？我见过两种方法。

A) 在 HTML 元素上指定自定义数据属性，以指示绑定目标、属性、正在绑定的元素属性等。像这样：

<input type="text" data-model="myState" data-attr="value:title" data-events="keyup" />

data-model指定要绑定的JS对象，attr是元素属性和对象属性，events是应该触发绑定的事件。然后 JS 代码可以根据这些属性自动识别和添加侦听器。

这是我最初基于以下代码的示例：

B）我看到的另一种方法是从JS端进行数据绑定，并使用元素ID，使用JS代码指定侦听器和属性。这意味着 HTML 只需要一个 ID，其他一切都在 JS 中指定。如果我正确理解代码，我认为这个 SO QA 属于这种类型：

这两个概念（我一般假设数据绑定）都需要知道要绑定的对象、UI 元素和属性。在 UI 代码 (A) 或 JS 代码 (B) 中这样做更好吗？

或者，A 和 B 在不同情况下是否同样有效？这是针对单页应用的，我打算直接在服务器上存储尽可能多的状态信息，并使用JS来处理动态交互。

经过一些额外的思考，A 的一个好处是您可以在仅更新 UI 代码的同时更改绑定状态的可视化。选项 B 需要同时修改 UI 代码和 JS 代码以添加或更改元素。

标签： javascriptdata-binding

我只在有一些 JS 挂钩的 HTML/CSS 库上见过实现 A。

但我会使用久经考验的路线，然后选择：

B）我看到的另一种方法是从JS端进行数据绑定，并使用元素ID，使用JS代码指定侦听器和属性。这意味着 HTML 只需要一个 ID，其他一切都在 JS 中指定。如果我正确理解代码...

$('#someid').val(valuehere,codehere,anything);