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本身不会从头开始支持bidirectionalBinding。

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

＆＃13;

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

＆＃13;

button{
  border:1px solid red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <h1></h1> 
</div>
<button>Click Here</button>

＆＃13;

只是为了澄清！可以实现一些你可以做到的事情调用bidirectionalBinding，但这不是你想要使用的普通的javascript！这意味着在你的上面实现eventListeners textValue等。

Answer 2

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节点和反之亦然。）

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

2 个答案: