Initializing JavaScript before registering a polymer element

Question

Moving from Polymer v0.5 to v1.0 the registration process for Polymer elements seems different. Prior to Polymer v1.0 we could execute JavaScript code from index.html to initialize all the necessary objects in our Polymer elements . This is a very important detail, because data-binding in Polymer ONLY works correctly when restricted FIRST objects are initialized. This means the following:

For example, if you want to associate an object in the Polymer element with {{ }} or [[ ]] , the object must be defined before registering the Polymer element ! Cm:

 <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 BEFORE the app.obj (in the above example this.obj is undefined during the registration of the Polymer element ), then <strong notification> NO will be executed and the update will not be provided even when the app.obj will NOT undefined later.

So, in such cases, we need to initialize the entire bounded object first, before we can use them with {{ }} or [[ ]] .

Is our approach completely wrong? Any suggestions???

Answer 1

I had a similar case, but it worked without worrying about async. Just define the property explicitly should work.

 properties: { obj: { type: Object, value: {} } } 

If this does not work, try specifying an observer and define a function that correctly processes obj .

 properties: { obj: { type: Object, value: {}, observer: 'loaded' } } 

Answer 2

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

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