如何在HTML元素中显示JS对象属性并在属性/属性更改后立即更新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