Javascript 是否可以将容器链接到另一个？

我有一组数据。我把这些数据放在我的网站上不同的地方，不同的属性，HTML值占位符等等。 是否可以将此值与我可以从中获取数据的数组链接？所以当我更改数组中的数据时，它会在站点上自动更改吗？ 我还试图展示我的意思：

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

在某些情况下，

test['place1']

的值更改为

'LA'

，同时，

myspan.innerHTML

的值也必须更改

---

请只使用原生JS。

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

---

正如@MCL在下面这篇文章的评论中指出的，有一种方法可以观察对象的更改，并且一般地附加到DOM上的元素并不太困难。但是，有很多很好的框架使得这很容易，所以这是一个需要考虑的问题。

< P>这需要手动管理。一个简单的解决方案如下：

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;
}

---

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

---

如果您只支持现代浏览器，那么可以使用getter/setter稍微清理一下语法

---

将来，您将能够使用代理，这将使它更加简单和干净。

没有原生方法将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'];

---

如果您执行类似于

test['place1']

的操作，那么您使用的数组是错误的。。那是什么？它是否改变了对问题的看法？不是真的，它只是一个指针。当您在对象中创建

place

属性时，JS数组仅采用自然（0和正整数）索引。如果您正在这样做，不妨使用数组中的

var test={}

@BASILIO，键是自然数。如果你想做一些类似于

test['place1']

，那么

test

应该是一个对象。至少不使用任何本机JS类型和对象。您必须创建某种自定义对象，以便在元素被更改时自动更改元素绑定到的innerHTML。@MCL谢谢，很高兴知道这一点。我不知道这是天生的。虽然这可能需要大量的手工工作，而且这种方法与较旧的浏览器兼容吗？我不能肯定地回答这个问题，但我不认为有任何理由不这样做……我已经尝试去理解它。在“setValue”之前是可以的，但是我如何更改span内的值呢？使用

setBinding（）

将元素绑定到boundArray后，每次使用

setValue（）

设置值时，span的innerHTML都会自动更改。

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