如何绑定对象以使用纯 js 更新值？

Question

我有一个具有名称值的对象。是否可以将该值绑定到 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 节点，反之亦然）。

Answer 2

JavaScript 本身不支持从头开始双向绑定。

要使您的示例正常工作，只需将您已经确定正确的表达式添加到您的 onClickFunction。

var ob = {};

ob.name = "Testing";
$('div').text(ob.name);


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

	ob.name = "Update Name";
        $('div').text(ob.name); <!-- add here -->
  
  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> 
</div>
<button>Click Here</button>

只是为了澄清！有可能实现一些你可以 调用双向绑定，但这不是您想要使用的 纯javascript！这意味着在您的 textValue 等