Polymer aktualisieren den Wert der Eigenschaft, die durch ein Verfahren berechnet wird

Question

Wir sind derzeit an einem Projekt arbeiten, in denen wir eine Kombination aus AngularJS und Polymer verwendet werden.

Wir haben eine gewisse Struktur, aber was wirklich wichtig ist dieses Stück Code:

<template is="dom-bind" angupoly="{dataContainer:'dataContainer'}"> 
    <menu-list for="places" data="{{dataContainer.getSomeData()}}"> 
</template> 

Wir haben eine Variable auf $ Bereich definiert namens Datacontainer, die in einem Regler eingestellt wird. Das Problem ist, dass dieser Code ausgeführt wird, bevor der Controller diese Eigenschaft bereitet, so ist es nicht definiert - es wirft:

[dom-bind :: _ annotatedComputationEffect]: Rechenmethode dataContainer.getSomeData() nicht

definiert und die Daten werden nie wieder aktualisiert und es funktioniert nicht. Im Gegenteil, mit einer Eigenschaft funktioniert es (es ist egal, ob es erster Zustand ist nicht definiert ist), es aktualisiert wird.

Weil es ein wirklich wichtiger Punkt in unserer Anwendung ist, wollen wir fragen. Wie erreiche ich das gewünschte Verhalten?

Dank, hat einen schönen Tag! :)

Answer 1

Ich bin nicht vertraut mit Polymer und wenn es possibilties die Ausführung des Polymer-Code oder wenn es ein Digest-Zyklen zu verzögern, könnte man mit wie in AngularJS arbeiten.

Aber ich würde vermuten, Sie diese Art von Race-Bedingung mit einem einfachen ng-if= in Verbindung mit <ng-include> auf AngularJS Seite vermeiden konnte -, da es nicht die Elemente auf das DOM hinzufügt, so dass jede Art von Wechselwirkung mit dem Polymer vermeiden, bis es inbegriffen.

So zB:

<figure ng-if="dataContainer.getSomeData"> 
    <ng-include src="'template.html'"> 
</figure> 

Und innerhalb template.html Ihre (unmodifiziert) Code:

<template is="dom-bind" angupoly="{dataContainer:'dataContainer'}"> 
    <menu-list for="places" data="{{dataContainer.getSomeData()}}"> 
</template> 

ich glücklich sein würde, wenn diese Ihnen hilft - aber wie ich schon sagte, es ist nur eine Vermutung und ich weiß nicht viel über Polymer und wie es mit dem DOM interagiert.

Answer 2

Der Fehler, den Sie sehen, wird nicht dadurch verursacht, dass dataContainer nicht definiert ist, sondern die Funktion, die Sie aufrufen. Polymer unterstützt diese Art von Funktionsaufrufen in der Datenbindung nicht. Vom docs:

Datenbindung bindet eine Eigenschaft oder Unter Eigenschaft ein benutzerdefiniertes Elements (das Host-Element) auf eine Eigenschaft oder ein Attribut eines Elements in seinem lokalen DOM (das Kind oder Zielelement).

Sie rufen eine Funktion für eine Eigenschaft auf, die nicht funktioniert. Wenn Sie eine Funktion aufrufen, könnten Sie dies mit computed bindings.

<menu-list for="places" data="{{getData(dataContainer.*)}}"> 

Dies setzt allerdings voraus, dass Ihre Menü-Liste in einem Elemente Mutter Polymer platziert ist, und ich bin nicht sicher, ob dies hier der Fall ist, wie Sie ein dom-bind verwenden. Wenn Sie jedoch ein Elternelement haben, können Sie die berechnete Funktion dort hinzufügen.

Polymer({ 
    is: 'parent-element', 
    properties: {dataContainer: ....}, 
    getData: function() { 
     return dataContainer.getSomeData(); 
    } 

}); 

getData wird jederzeit Datacontainer oder seine Unter Eigenschaften genannt werden ändern.