javascript - 如何绑定(bind)对象以使用普通js更新值？

Question

我有一个名称为值的对象。是否可以将该值绑定(bind)到 html 元素？ - 像 angularjs

如果是这样，正确的方法是什么？还是不可能？

这是我的演示:

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;
}

<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 节点，反之亦然)。