JavaScript initialization before Polymer element registration

Question

Moving from Polymer v0.5 to v1.0 the registration process of Polymer elements seems to be different. Before Polymer v1.0 we could execute JavaScript code from index.html to initialize all needed objects in our Polymer elements. This is a very important detail because the data-binding in Polymer ONLY works correct when the bounded objects are initialized FIRST. This means the following:

For example if you want to bind an object in your Polymer element with {{ }} or [[ ]], the object must be defined before the Polymer element registration! See:

<dom-module id="my-elem">
  <template>
    <div>This should be my bounded object: <b>{{obj.name}}</b></div>
  </template>
  <script>
    Polymer({
    is: 'my-elem',
    ready: function () {
      // Global initialized object!!!
      // app.obj ==> app.obj = { name: 'Great', info: 'Additional info!!!' };
      this.obj = app.obj;
    }
    ...      
  </script>
</dom-module>

The problem is that if the Polymer element is registered BEFORE app.obj is initialized (in the example above this.obj is undefined at the time of Polymer element registration) then NO notification will be executed and no update provided even when app.obj is NOT undefined later on.

So in cases like that we need to initialize all bounded object first before we can use them with {{ }} or [[ ]].

Is our approach totally wrong??? Any suggestions???

Answer 1

As a workaround, instead of this.obj = app.obj; in a ready function, I would add an event listener that would listen to an event fired when app.obj loads and then sets the binding:

ready: function() {
  var that = this;
  this.addEventListener('app-obj-loaded', function() {that.obj=app.obj});
}