引用javascript对象属性的HTML内容

Question

有没有一种方法可以使这项工作在javascript中？

// define an user class
var User = function (name) {
    this.name = name;
}

// create an user object
var user = new User('John');

var anchor = document.createElement('a');

anchor.innerHTML = user.name;
// add the anchor to DOM
document.body.appendChild(anchor);

// change the user name
user.name = 'James';

此后，锚点的html会自动更改内容，因为它包含对对象用户的引用。 也许这听起来有些愚蠢，但是我的想法是，是否有一种方法可以通过对象引用监视DOM值的任何变化。

非常感谢。

Answer 1

这是行不通的。 您需要手动更新innerHTML以反映该值。 您可以使用诸如AngularJS之类的聪明框架来取消此手动操作。

Answer 2

您无法使用DOM来监视它，因为您正在寻找对象的属性何时发生变化。

您可以通过使用带有setter函数的属性而不是普通属性来进行监视。

 // define an user class function User(name) { this._name = name; } // Add some functions to watch variables and play with the DOM Object.defineProperties(User.prototype, { add_to_dom: { value: function add_to_dom(parent_element) { this._parent_element = parent_element; this._text_node = document.createTextNode(""); this._parent_element.appendChild(this._text_node); this.update_dom(); } }, update_dom: { value: function update_dom() { this._text_node.data = this._name; } }, name: { get: function() { return this._name; }, set: function(name) { this._name = name; this.update_dom(); } } }); // create an user object var user = new User('John'); var anchor = document.createElement('a'); document.body.appendChild(anchor); user.add_to_dom(anchor); // change the user name user.name = 'James'; 

对于更大规模的方法，您可能需要研究React等工具。

Answer 3

您必须像MVC一样制作模型（模型，视图控件）

您的用户类别是模型HTML元素是视图您需要的是一个控制器，它控制值的更改