Question

确保DOM元素的innerHTML始终与JS obj的值相同，最简单（即无外来功能）的方法是什么？

例如：

<h1>Yep</h1>

status = "Nope";

现在它说＆＃34; Nope＆＃34;。

现在，用户打开ContentEditable并编辑h1以表示＆＃34;是的！＆＃34; ...

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

Answer 1

你可以使用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

双向绑定DOM el和JS obj的简单方法

1 个答案: