相关疑难解决方法(0)

请将此问题视为严格教育.我仍然有兴趣听到新的答案和想法来实现这一点

TL;博士

我如何使用JavaScript实现双向数据绑定？

数据绑定到DOM

通过数据绑定到DOM,我的意思是,例如,拥有一个a带有属性的JavaScript对象b.然后有一个<input>DOM元素(例如),当DOM元素改变时,a改变,反之亦然(也就是说,我的意思是双向数据绑定).

以下是AngularJS的示意图:

所以基本上我有类似的JavaScript:

var a = {b:3};

然后输入(或其他形式)元素,如:

<input type='text' value=''>

我希望输入的值是a.b值(例如),当输入文本发生变化时,我也想a.b改变.当a.bJavaScript发生变化时,输入会发生变化.

问题

在纯JavaScript中完成此操作的基本技术有哪些？

具体来说,我想要一个很好的答案来参考:

• 如何绑定对象的工作？
• 如何听取表格中的变化可能有效？
• 是否有可能以简单的方式仅在模板级别修改HTML？我想不跟踪HTML文档本身的绑定,而只是跟踪JavaScript(使用DOM事件,并且JavaScript保持对所使用的DOM元素的引用).

我试过了什么？

我是Mustache的忠实粉丝,所以我尝试用它来模板化.但是,当我尝试执行数据绑定本身时遇到了问题,因为Mustache将HTML作为字符串处理,因此在得到结果之后,我没有引用viewmodel中对象的位置.我能想到的唯一解决方法是使用属性修改HTML字符串(或创建DOM树)本身.我不介意使用不同的模板引擎.

基本上,我有一种强烈的感觉,我正在使手头的问题变得复杂,并且有一个简单的解决方案.

注意:请不要提供使用外部库的答案,尤其是那些包含数千行代码的库.我已经使用了(并且喜欢!)AngularJS和KnockoutJS.我真的不想要"使用框架x"形式的答案.最理想的是,我希望未来的读者不知道如何使用许多框架来掌握如何自己实现双向数据绑定.我不希望得到一个完整的答案,而是一个能够理解这个想法的答案.

如何在jQuery中实现简单的双向数据绑定？像knockoutJS这样的东西,但是最简单的形式.

场景 - 将JSON对象绑定到表行(每个字段都是td> input />/td>).

有什么建议？