1

Currently I am writing an application that consists of hundreds of JS objects asynchronously being updated in the background. Multiple panels, created with iframes can be used to visualize the various objects in HTML.

The challenge: as soon as an object is updated, the corresponding HTML element displaying the updated property/attribute should automatically update itself. Changes occurring to the HTML element should/do not necessarily affect the object! Many of the two-way databinding libraries I've seen are way to overblown for my needs.

Is it possible to write something efficient using Object.observe? Currently I have tried the following (which works), but is terrible for performance and objects keep getting observed after the HTML is already deleted (the panel was closed or a new object opened):

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>

setting "obj.param1 = 0;" in the console of main.html will cause all the elements to change exactly the way I need. Is there a more elegant way of achieving this, especially with elements being created and deleted all the time?

Thanks in advance for comments and ideas!

EDIT : For those who are stuck with a similar challenge, I ended up writing a tiny library that solved most of my issues: github.com/weltwinkel/.b

tlaloc
  • 21
  • 4
  • You've said the two-way binding libs are overblown for your purpose, but frankly it sounds like your use case is **exactly** what they're for. [RivetsJS](http://rivetsjs.com/) is only 6.2k minified and gzipped, and handles all this plumbing for you. (Not an *endorsement*, an example.) Also note that `Object.observe` is an ES.next feature (probably 2016 or 2017) and while some engines have it (well, Chrome's V8 does), it's [far from well-supported](http://caniuse.com/#feat=object-observe). (Note that RivetsJS relies on something IE8 doesn't have, if that matters for your project.) – T.J. Crowder Oct 02 '15 at 08:31
  • Thanks for the comment about RivetsJS T.J. Crowder I'll take a closer look at that. The system is intended to run only on Chrome in a private network, so supporting all browsers is luckily not an issue. – tlaloc Oct 02 '15 at 08:42

0 Answers0