0

我有一组数据。我已经将这些数据放在我的网站上不同属性的不同位置，innerHTML 值占位符的方式等。是否可以将这些值与我可以从中获取数据的数组链接起来？这样当我更改数组中的数据时，它会在网站上自动更改吗？我也试图说明我是如何做到的：

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

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

请只使用本机 JS。

4

3 回答 3

0

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

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

于 2013-01-29T16:39:43.617 回答
0

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

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，这将使其更加轻松和清洁。

于 2013-01-29T16:44:42.543 回答
0

没有本地方法可以将 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'];
于 2013-01-29T17:01:19.170 回答