Verschachtelte Eisen-Seite mit ausgewähltem Attribut

Question

Ich verwende das iron-page Element aber in verschachtelter Weise. Beispiel:

In Datei 0-0.html:

<iron-page> 
    <1-0></1-0> 
    <2-0></2-0> 
</iron-page> 

In Datei 1-0.html:

<iron-page> 
    <1-1></1-1> 
    <1-2></1-2> 
    <1-3></1-3> 
</iron-page> 

In Datei 2-0.html:

<iron-page> 
    <2-1></2-1> 
    <2-2></2-2> 
    <2-3></2-3> 
</iron-page> 

Ich muss wissen, wenn eines der Elemente von <1-1> bis <2-3> (nennen Sie sie Sohn Element) sind gezeigt. Zu tun, dass ich die selectedAttribute Eigenschaft verwendet, aber mein Problem ist:

Warum, wenn ein Mutter iron-page Element deaktiviert ist, er ein Element halten, wie ausgewählt? Was ich schließlich tun möchte ist, benachrichtigt zu werden, wenn ein iron-page Sohn Element angezeigt oder ausgeblendet wird. Kann mir jemand helfen?

Dank

Answer 1

Alles über Vermehrung kann durch Bindung erfolgen. So etwas wie

<iron-pages> 
    <1-0 selected="{{selectedOne}}"></1-0> 
    <2-0 selected="{{selectedTwo}}"></2-0> 
</iron-pages> 

innerhalb Sohn Elemente definieren Sie Eigenschaft: selected. und setze sie notify: true. Notify bedeutet, dass bei jeder Änderung dieser Eigenschaft die Eigenschaft des übergeordneten Elements, die an diesen Wert gebunden ist, automatisch aktualisiert wird.

Eigenschaften: { ausgewählt: { Wert: null, mitteilen: true} }

innerhalb Sohn Elemente Ihre iron-pages-selected Eigenschaft Bindung haben. Wie:

<iron-pages selected="{{selected}}"> 

und das ist es. Immer wenn eine ausgewählte Eigenschaft geändert wird (innerhalb von Sohnelementen), lädt das Elternelement seine Eigenschaften selectedOne und selectedTwo automatisch neu.

Sie können Observer auch den Eigenschaften selectedOne und selectedTwo hinzufügen, die einige Funktionen aufrufen, so dass Sie genau wissen, wann Sie eine Logik erstellen müssen.

so in dem Mutterelement:

properties: { 
    selectedOne: { 
    value: null, 
    observer: "_selectedOneChanged" 
    }, 
    selectedTwo: { 
    value: null, 
    observer: "_selectedTwoChanged" 
    } 
} 

Ein andere Lösung

Lösung oben gut ist, aber in mehr verschachtelten Elementen es fast unmöglich ist, damit es funktioniert und es ist wirklich chaotisch. Ein anderer Weg wäre der Event Listener. Polymer hat Feuermethode, die wirklich großartig ist zu wissen. Weitere Informationen finden Sie in documentation.

Kurz:

in son Element, das Sie tun so etwas wie

this.fire("iron-pages-changed", {page: this.selected}); 

und Mutter Element:

ready: function() { 
    this.addEventListener("iron-pages-changed", function() { 
    ... some logic ... 
    } 
}