如何绑定对象以使用普通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 本身不支持从头开始的双向绑定。

要让您的示例正常工作，只需将您已经确定正确的表达式添加到您的 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>

Just to clarify! It is possible to implement something that you could call bidirectionalBinding, but thats not what you want to do using plain javascript! It would mean implementing eventListeners on your textValue etc.

Answer 2

Javascript 允许创建对象 "properties"，其中读取或写入可以执行用户定义的代码。

您可以做的是创建 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 节点，反之亦然）。

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

How to bind a object to update the value using plain js?

javascript

javascript-objects