javascript - JS オブジェクトのプロパティを HTML 要素に表示し、属性/プロパティが変更されるとすぐに HTML を更新する方法

Question

現在、バックグラウンドで非同期に更新される何百もの JS オブジェクトで構成されるアプリケーションを作成しています。iframe で作成された複数のパネルを使用して、HTML のさまざまなオブジェクトを視覚化できます。

課題: オブジェクトが更新されるとすぐに、更新されたプロパティ/属性を表示する対応する HTML 要素が自動的に更新される必要があります。HTML 要素に発生する変更は、必ずしもオブジェクトに影響を与える必要があります。私が見た双方向のデータバインディング ライブラリの多くは、私のニーズを誇張する方法です。

Object.observe を使用して効率的なものを書くことは可能ですか? 現在、私は次のことを試しました(これは機能します)が、パフォーマンスが悪く、HTMLが既に削除された後(パネルが閉じられたか、新しいオブジェクトが開かれた後)、オブジェクトが監視され続けます:

main.html:

<iframe src="panel.html"></iframe>
<script>
var module = function(){ // constructor
    var obj = this;
    obj.param1 = "foo";
    obj.param2 = "bar";
    obj.id = 123;   
};
module.prototype = {};
var mod = new module(); // create the object
</script>

---

panel.html

<script>
// jquery extension to observe attribute and set/update value
$.fn.extend({
  vbind: function(object,parameter) {
    var el = this; // get current element instance

    $(el).html(object[parameter]); // set current value of parameter

    // observe object of interest
    Object.observe(object, function(changes){
        // This asynchronous callback runs
        changes.forEach(function(change) {
            $(el).html( object[change.name] ); // set new value of parameter
        });
    });
    return el;
  }
});


$(function(){
// create 1000 elements all listening for changes in object
for(var i = 0; i < 1000; i++){
        $("<div>").vbind(parent.mod,"param1").appendTo("body");
    }
});
</script>

「obj.param1 = 0;」を設定します main.html のコンソールで、すべての要素が必要な方法で正確に変更されます。特に要素が常に作成および削除されている場合、これを達成するためのよりエレガントな方法はありますか?

コメントやアイデアをお寄せいただきありがとうございます。

編集:同様の課題に悩まされている人のために、私の問題のほとんどを解決する小さなライブラリを作成することになりました: github.com/weltwinkel/.b