我正在尝试编写自己的数据绑定代码，主要是作为一种学习经验，所以我确切地知道发生了什么。应在何处指定数据绑定的相关详细信息？我看到了两种方法。
A) 在 HTML 元素上指定自定义数据属性，以指示绑定目标、属性、要绑定的元素属性等。像这样：
<input type="text" data-model="myState" data-attr="value:title" data-events="keyup" />
数据模型指定要绑定的 JS 对象，attr 是元素属性和对象属性，事件是应该触发绑定的事件。然后，JS 代码可以根据这些属性自动识别和添加侦听器。
这是我最初基于代码的示例：
https://stackblitz.com/edit/two-way-data-binding-poc
B)我看到的另一种方法是从JS端进行数据绑定，并使用元素ID，使用JS代码指定侦听器和属性。这意味着 HTML 只需要一个 ID，其他所有内容都在 JS 中指定。如果我正确理解代码，我认为这个 SO QA 属于这种类型：
如何在 JavaScript 中实现 DOM 数据绑定
这两个概念(我假设一般的数据绑定)都需要知道要绑定的对象、UI 元素和属性。在 UI 代码 (A) 或 JS 代码 (B) 中执行此操作更好吗？
或者，A和B在不同情况下是否同样有效？这是针对单页应用程序，我打算直接在服务器上存储尽可能多的状态信息，并使用JS来处理动态交互。
经过一些额外的思考，A 的一个好处是，您可以在仅更新 UI 代码的同时更改绑定状态的可视化效果。选项 B 需要修改 UI 代码和 JS 代码才能添加或更改元素。
我只在具有一些JS钩子的HTML/CSS库的库上看到过实现A。
例如，Zurb的基金会似乎将其用于他们的"粘性"插件。
但我会使用久经考验的路线，并使用：
B)我看到的另一种方法是从JS端进行数据绑定，并使用元素ID，使用JS代码指定侦听器和属性。这意味着 HTML 只需要一个 ID，其他所有内容都在 JS 中指定。如果我正确理解了代码...
$('#someid').val(valuehere,codehere,anything);