如何绑定一个对象来使用普通JS更新值？

Question

var ob = {};

ob.name = "Testing";

$('div').text(ob.name);

$('button').on('click', function(){

	ob.name = "Update Name";
  
  console.log( ob.name ) //name updates

})

button{
  border:1px solid red;
}

html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <h1></h1> <!-- on click nothing updates automatically -->
</div>
<button>Click Here</button>

Answer 1

Javascript允许创建对象“属性”，在这些属性中，读或写可以执行用户定义的代码。

您可以做的是创建HTML节点和带有属性的Javascript对象，这样当您写入属性时，代码就会更新HTML节点：

var d = document.createElement("div");
document.body.appendChild(d);
var obj = {get value()  { return d.textContent; },
           set value(x) { d.textContent = x; }};
obj.value = "foo"; // Will also update d content

请注意，允许写入的属性需要一个存储数据的地方...在上面的文章中，我直接使用了d.textContent，所以这两者实际上是同步的（更改obj.value会更改DOM节点，反之亦然）。