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

Question

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

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

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

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

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

https://stackblitz.com/edit/two-way-data-binding-poc

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

How to Implement DOM Data Binding in JavaScript

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

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

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

Answer 1

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

For instance, Zurb's Foundation seems to use that for their "Sticky" plugin.

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

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

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