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 に答える