Polimer odśwież wartość właściwości, która jest obliczana za pomocą metody

Question

Obecnie pracujemy nad projektem, w którym używamy kombinacji AngularJS i polimeru.

Mamy pewną strukturę, ale to, co naprawdę ważne jest to fragment kodu:

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

Mamy zmienną zdefiniowaną na $ zakresu nazwie dataContainer, który jest ustawiony w sterowniku. Problemem jest to, że ten kod jest wykonywany przed kontroler przygotowuje tę właściwość, więc jest niezdefiniowana - rzuca:

[dom-wiązania :: _ annotatedComputationEffect]: metoda obliczeniowa dataContainer.getSomeData() nie zdefiniowany

a dane nigdy nie są odświeżane i nie działa. Wręcz przeciwnie, w przypadku właściwości działa (nie ma znaczenia, czy pierwszy stan jest niezdefiniowany), jest odświeżany.

Ponieważ jest to bardzo ważny punkt w naszej aplikacji, chcemy zapytać. Jak osiągnąć wymagane zachowanie?

Dzięki, życzę miłego dnia! :)

Answer 1

Nie jestem zaznajomiony z polimerem i jeśli istnieją możliwości opóźnienia wykonania kodu polimeru lub jeśli istnieją cykle trawienia, z którymi można pracować podobnie jak w AngularJS.

Ale myślę, że można uniknąć tego rodzaju sytuacji wyścigu z prostym ng-if= w połączeniu z <ng-include> na stronie angularjs - jak się nie dodawać elementy do DOM, a tym samym uniknąć jakiejkolwiek interakcji z polimeru aż będzie w zestawie.

Tak np

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

A w ciągu template.html swojej (niezmodyfikowanej) Kod:

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

Byłbym szczęśliwy, jeśli to pomaga - ale jak już mówiłem jest to tylko przypuszczenie i nie wiem zbyt wiele na temat polimeru i jego interakcji z DOM.

Answer 2

Błąd, który widzisz, nie jest spowodowany niezdefiniowaniem obiektu dataContainer, ale funkcją, którą wywołujesz. Polimer nie obsługuje tego typu wywołań funkcji w wiązaniu danych. Z docs:

Powiązanie danych wiąże obiekt lub podzbiór właściwości elementu Syntetycznego (elementu przyjmującego) do właściwości lub atrybutu elementu lokalnego DOM (komponent dziecko lub docelowej).

Wywołujesz funkcję na właściwości, która nie działa. Jeśli chcesz wywołać funkcję, możesz to zrobić za pomocą computed bindings.

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

Jednak ta zakłada, że ​​menu-lista jest umieszczona w jakiejś nadrzędnej Polymer elementu i nie jestem pewien, czy jest to przypadek tu użyć dom-bind. Jeśli jednak masz element nadrzędny, możesz dodać tam funkcję obliczeniową.

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

}); 

getData zostanie wywołana w każdej chwili dataContainer lub jego sub-properties zmienić.