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函数的属性而不是普通函数来监视它。

＆＃13;

// 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';

＆＃13;

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

Answer 3

你必须做出像What specs do I need to know to develop bluetooth (AVRCP 1.4) iPhone app

这样的事情

您的用户类是模型您的HTML元素是一个视图你需要的是一个控制器，它控制值的变化

参考javascript对象的HTML内容attrtibute

3 个答案: