JavaScript Initialisierung vor Polymer Elemente Registrierung

Question

Umzug von Polymerv0.5 zu v1.0 der Registrierungsprozess von Polymer elements scheint anders zu sein. Vor Polymer v1.0 konnten wir JavaScript-Code von index.html ausführen, um alle benötigten Objekte in unserem Polymer elements zu initialisieren. Dies ist ein sehr wichtiges Detail, da die data-binding in PolymerONLY korrekt funktioniert, wenn die gebundenen Objekte initialisiert werden FIRST. Das bedeutet folgendes:

Zum Beispiel, wenn Sie ein Objekt in Ihrem Polymer element mit {{ }} oder [[ ]] binden möchten, das Objekt muss vor der Polymer element Registrierung definiert werden! Siehe:

<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> 

Das Problem, das ist, wenn die Polymer elementVOR registriert ist app.obj initialisiert (im Beispiel oben this.obj ist undefined zum Zeitpunkt der Polymer element Registrierung) dann NO Benachrichtigung ausgeführt wird und kein Update zur Verfügung gestellt, auch wenn app.obj ist NICHTundefined später.

Also in Fällen wie diesem müssen wir zuerst alle gebundenen Objekte initialisieren, bevor wir sie mit {{ }} oder [[ ]] verwenden können.

Ist unser Ansatz völlig falsch ??? Irgendwelche Vorschläge???

Answer 1

Ich hatte ähnlichen Fall, aber arbeitete ohne sich über Async zu sorgen. Definieren Sie einfach die Eigenschaft explizit sollte funktionieren.

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

Wenn das nicht funktioniert, versuchen Sie observer spezifizieren und eine Funktion definieren, die obj richtig behandelt.

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

Answer 2

Als Abhilfe können statt this.obj = app.obj; in einer ready Funktion, würde ich einen Ereignis-Listener hinzufügen, die gefeuert zu einem Ereignis hören würde, wenn app.obj lädt und dann die Bindung setzt:

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