wie kann Komponente in Eisen-Seiten wissen, wann es

Question

Ich habe ein Polymer ausgewählt ist 1,0 Eisen-Seiten-Element enthält zwei benutzerdefinierte Elemente:

<iron-pages selected="..."> 
    <my-page>A</my-page> 
    <my-page>B</my-page> 
</iron-pages> 

Ich möchte einige Maßnahmen ergreifen, wie Ajax Abrufen von Inhalten, in Meine-Seite-Komponente, wenn die Seite ausgewählt wird. Wie kann ich das machen?

kam ich mit ein paar Ideen:

a) erstellen eine dritte Komponente, die Eisen-Seiten mit dem Inhalt und der Verdrahtung die Ereignisse

<dom-module id="my-controller"> 
    <template> 
    <iron-pages selected="..." on-selected-changed="onPageChanged"> 
    ... 
    <script>Polymer({... 
    ... 
    onPageChanged:function(){ 
     var page = ...; 
     page.selected = true; 
    } 

und

<dom-module id="my-page"> 
    ... 
    onSelected:function(){ 
    // fetch data 
    } 

ziemlich viel zu sein scheint ein Overhead für mich, ist das wirklich notwendig? verwenden

b) <iron-pages selectedAttribute="..." ...>

aber ich nicht einen Weg finden, könnte die Attributänderung in <my-page>

Gibt es gemeinsame Muster zu lösen, dies zu erkennen?

Answer 1

Meine Lösung war, ähnlich wie Ihre Option A, aber die Ereignisse statt Methode nennt - es ist ein richtiger Ansatz, und ich bin wirklich verwirrt, warum Polymer's ironSelectableBehavior nicht direkt umgesetzt haben:

<iron-pages id="pages" ...> 
    <my-first-page></my-first-page> 
    <my-second-page></my-second-page> 
</iron-pages> 

... 

<script> 
Polymer({ 
    is: 'my-app', 
    listeners: { 
     'pages.iron-select': 'pageSelected', 
     'pages.iron-deselect': 'pageDeselected' 
    }, 
    pageSelected: function(e) { e.detail.item.fire('iron-select'); }, 
    pageDeselected: function(e) { e.detail.item.fire('iron-deselect'); }) 
}); 
</script> 

Dann in Ihrem Element, hören sie, für diese Ereignisse:

Polymer({ 
    is: 'my-custom-element', 
    listeners: { 
     'iron-select': '_refreshData' 
    }, 
    _refreshData: function(e) { 
     // load some data 
    } 
}); 

Option B sollte auch funktionieren - Sie wahrscheinlich die richtige Eigenschaft und put an observer on it einrichten müssen. In Ihrer Komponente, enthält iron-pages das Attribut einrichten mit der Bindestrich-Form:

<iron-pages selected-attribute="activated" ...> 
    <my-first-page></my-first-page> 
    <my-second-page></my-second-page> 
</iron-pages> 

Dann in Ihrer benutzerdefinierten Komponente die Eigenschaft und den Betrachter ein:

Polymer({ 
    is: 'my-first-page', 
    properties: { 
     activated: { 
      type: Boolean, 
      observer: '_activationChanged' 
     } 
    }, 
    _activationChanged: function(newval, oldval) { 
     if (newval) // == true 
      console.log("just activated"); 
    } 
});