HTML-контент со ссылкой на объект javascript attrtibute

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

Вы должны сделать seomthing как MVC (Model, View Control)

Ваш класс пользователя ист модели Ваш HTML элемент представляет собой вид Что вам нужно, это контроллер, который управляет изменением значения