我有一个名称为值的对象。是否可以将该值绑定(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>
最佳答案
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 节点,反之亦然)。
关于javascript - 如何绑定(bind)对象以使用普通js更新值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36276282/