はどのように鉄 - ページ内のコンポーネントは、それが、私は2つのカスタム要素を含むポリマー1.0鉄 - ページの要素を持っている

Question

を選択したときに知ることができますページが選択されると、マイページコンポーネント。これどうやってするの？

私はいくつかのアイデアを思い付いた：

a）の第三成分の鉄 - ページを含むイベントに

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

と

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

の配線を作成することは、むしろ多くのようです私にオーバーヘッド、これは本当に必要ですか？

b）は<iron-pages selectedAttribute="..." ...>

を使用しますが、私は<my-page>

の属性変化を検出する方法を見つけることができませんでしたこれを解決するが一般的なパターンはありますか？

Answer 1

私のソリューションは、あなたのオプションAと同様であったが、代わりにメソッドのイベントを使用して呼び出す - そのより正確なアプローチ、およびPolymer's ironSelectableBehaviorはそれを直接実装しなかった理由私は実際にバッフル付きだ：

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

を次に、あなたの要素には、これらのイベントをリッスン：

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

オプションBも動作するはずです - あなたはおそらく正しいプロパティとput an observer on itを設定する必要があります。

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

その後、あなたのカスタムコンポーネントにプロパティおよびオブザーバを設定します：iron-pagesはハイフンで連結した形式を使用して属性を設定する含まれているコンポーネントで

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