Question

我有一组数据。我已经将这些数据放在我的网站上不同的地方，不同的属性，innerHTML值占位符等。是否可以将此值与我可以获取数据的数组相关联？那么当我更改数组中的数据时，它会在网站上自动更改吗？我还试着说明我的意思是：

var test = Array();
test['place1'] = 'NY';
var myspan = document.createElement('span');
myspan.innerHTML = test['place1'];

在某些情况下，test['place1']的值更改为'LA'，同时必须更改myspan.innerHTML的值。

仅限原生JS。

Answer 1

您所谈论的是MVVM解决方案。大多数MVVM JavaScript解决方案使用一些表示可观察对象的对象，该对象是对象中的一个字段。当对象中的值发生更改时，observable会让框架知道更新DOM。它还会侦听DOM以获取更改事件，并反向更新对象。对于数组，它是一个类似的过程：它侦听数组的添加或删除，并相应地更新UI。

正如@MCL在下面这篇文章的评论中所指出的那样，有一种方法可以观察对象的变化，并且一般来说附加到DOM上的元素并不是很困难。但是，有很多很好的框架可以让这很容易，所以这可能需要考虑。

Answer 2

这需要手动管理。一个简单的解决方案是这样的：

function Place(container, initVal) {
    this.container = container ? container : {};
    this.set(initVal);
}
Place.prototype.place = "";
Place.prototype.get = function() {
    return this.place;
}
Place.prototype.set = function(val) {
    this.place = val;
    this.container.innerHTML = val;
}

var test = {}; // object

test['place1'] = new Place(document.createElement('span'), "NY")

test['place1'].set('New Value');

这不是一个完整的功能解决方案，但可以让您了解需要进行的协调。

如果您只支持现代浏览器，则可以使用getter / setter清除语法。

将来，您将能够使用Proxy，这将使其更加轻松和清洁。

Answer 3

没有本地方法将HTML元素的属性绑定到数组的值，但实际上并没有使用数组;你正在使用一个对象，在一个对象上定义特殊功能是一件简单的事情。例如：

首先，定义您的对象：

function boundArray(){
    this._bindings = {};
    this.setBinding = function(key,element){
          this._bindings[key] = element;
    };
    this.setValue = function(key,value){
        this[key] = value;
        if(this._bindings[key]){
             this._bindings[key].innerHTML = value;
        }
    }
}

然后在您的代码中使用它：

// create a new instance of the boundArray
var test = new boundArray();
// create the HTML element to use, and add it to the DOM
var myspan = document.createElement('span');
document.body.appendChild(myspan);
// bind the HTML element to the required key in the boundArray
test.setBinding('place1',myspan);
// Now every time you set that key on the boundArray (using setValue), it will also change the innerHTML field on the element
test.setValue('place1','NY');
// You can access your information from the boundArray in the usual ways:
var somevar = test.place1;
var anothervar = test['place1'];

是否可以将容器链接到其他容器？

3 个答案: