javascript - JavaScript 中的简单 Observable 2 路数据绑定(bind)

标签 javascript jquery observable 2-way-object-databinding

我知道很多大牌 MVC、M** 风格的 JavaScript 框架都允许与 Observables 进行 2 路绑定(bind)。

意思是如果我:

  • 更新 DOM 输入字段,它还会更新 JavaScript 对象变量,该变量也可以通过 AJAX 请求保存到服务器。
  • 如果我更新 JavaScript 对象变量,它也会依次更新 DOM 文本字段。

当我学习 JavaScript 时,我很想跳过那些大名鼎鼎的库,并学习如何以最基本的原始 JavaSript 形式来实现这一点。

任何人都可以在不使用 BackboneJS、Knockout、Angular 或其他库的情况下提供此功能的快速且易于理解的演示吗?

jQuery 是可以接受的。

我很感激这次类(class)并请提供帮助。

最佳答案

这在每个框架中都是不同的。

例如,Angular 将每个变量保存在作用域中。遍历范围变量并将值与之前的值进行比较,如果有更改,则会将其执行到 DOM。

此检查是在调用摘要周期时进行的。如果一个周期完成,它会再次调用,直到“观察到”的每个变量都与前一个周期中的相同。您还可以向此“观察者”添加对象或变量。

Angular 保持 View 最新,每次有东西可能改变“观察到的”变量时调用此摘要,例如 http 调用、用户交互......但是例如,如果您从 Angular(控制台)外部更改变量,那么变量的改变没有对 DOM 进行。您必须手动调用摘要周期才能执行此操作。

在 HTML5 中,使用 Object.observe 会更容易一些,但目前市场上的所有浏览器尚不支持它。

希望能帮上忙

关于javascript - JavaScript 中的简单 Observable 2 路数据绑定(bind),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30278531/

相关文章:

javascript - 未知错误 - jQuery

jquery - 使用 AJAX 执行基本 CRUD 的最佳方式是什么

wpf - Rx 响应式(Reactive)扩展 Observeondispatcher 单元测试错误 : The current thread has no Dispatcher associated with it

javascript - 从 chrome-extension-popup 的无序列表中删除一项也会删除该项之后的一项

javascript - 创建一个勾选框,然后通过单击自动勾选所有其他勾选框,并显示一个按钮

Angular4 可观察到数组

firebase - Angularfire2:授权更改和权限被拒绝时的嵌套可观察量

javascript - Javascript 中的字符串替换

javascript - 如何将数组添加到 Javascript 对象

javascript - 将 Canvas 转换为 PDF