使用javascript Object.defineProperty创建数据绑定

时间:2016-12-10 07:19:20

标签: javascript data-binding

我一直在使用javascript Object.defineProperty来创建数据绑定。这是我的例子。我不明白为什么数据的属性:当我在html.Thx中更改input2的值时,名称会更新。

<input type="text" id="text1" />
<input type="text" id="text2" />

var input1 = document.querySelector("#text1");
var input2 = document.querySelector("#text2");
var data = {};
Object.defineProperty(data, "name", {
  configurable: true,
  get: function(){
      console.log(1111);
      return input1.value
  },
  set: function(newValue){
      console.log(222);
    input1.value = newValue;
    input2.value = newValue;
  }
})
data.name = "sss";
input1.onchange = function(){
  console.log(33333)
  data.name = data.name;
}
input2.onchange = function(){
  input1.value = this.value;
  console.log(data);
}

1 个答案:

答案 0 :(得分:0)

  1. 当用户更改input2时,会调用input2.onchange()
  2. input2.onchange()设置input1.value
  3. 由于get()方法返回input1.value,引用data.name会返回新的input1.value