javascript - 双向绑定(bind)DOM el和JS obj的简单方法

确保DOM元素的innerHTML始终与JS obj的值相同的最简单的方法（即没有多余的功能）是什么？

例如：

<h1>Yep</h1>

status = "Nope";

现在它说“不”。



现在，用户打开ContentEditable并编辑h1以说“是！” ...

(status == "Yes!";) #true

最佳答案

您可以使用getter和setter：

var elem = document.getElementById('elem') // an input for example

var obj = {
  _value: undefined,
  set value(value) {
    elem.value = this._value = value // bind value to input
  },
  get value() {
    return this._value
  }
}

elem.addEventListener('input', function() {
  obj.value = this.value // bind input to value
})

这是一个演示：http://jsbin.com/yexife/1/edit

关于javascript - 双向绑定(bind)DOM el和JS obj的简单方法，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25129088/