When upgrading from Polymer version v0.5 to v1.0, the process of registering Polymer elements seems to have changed. Previously, in Polymer v1.0, we were able to execute JavaScript code from the index.html file to initialize all the necessary objects in our Polymer elements. This is a crucial detail because correct data-binding in Polymer only functions properly when the bound objects are initialized first.
For instance, if you want to bind an object in your Polymer element using {{ }} or [[ ]], the object must be defined before the Polymer element registration takes place. Here's an example:
<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 issue arises when the Polymer element is registered before the initialization of app.obj (in the example above, this.obj is undefined during the Polymer element registration). In this scenario, no notification will be triggered and no updates provided even if app.obj is not undefined later on.
Therefore, in such cases, it is necessary to initialize all bound objects beforehand in order to make use of them with {{ }} or [[ ]].
Are we completely mistaken in our approach??? Any suggestions???