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>

设置＆＃34; obj.param1 = 0;＆＃34;在main.html的控制台中将导致所有元素完全按照我需要的方式更改。有没有更优雅的方法来实现这一点，特别是在创建和删除元素的过程中？

提前感谢您提出意见和建议！

编辑：对于那些陷入类似挑战的人，我最终编写了一个解决我大部分问题的小型库：github.com/weltwinkel/.b

如何在HTML元素中显示JS对象属性，并在属性/属性更改时立即更新HTML

0 个答案: