アイアンセレクターをアイアンページに正しくバインドする方法は？

Question

私はこの他の質問と同じ基本的な仕事、iron-selector selected={{}} binding with iron-pages selected={{}}をしようとしていますが、ソリューションを複製できないため、私のケースが異なるはずです。

ボタンのメニューをiron-selectorにしたいのですが、クリックするとiron-pagesの内容が変更されます。

about-buttons.htmと呼ばれるボタンメニュー用の1つのwebcomponentを持つ実際のページabout.htmを持っていて、各ページに1つのwebcomponentがあります。 about-who.htm,about-manifestoおよびabout-team。

私の質問はです：

は、どのように私のWebコンポーネントのこのような構造を持つ私は私のページと私のボタンをバインドすることができます - および/または、なぜ私の現在の方法が間違っているのですか？

このような単純なデータバインディングを行うには、さまざまな方法があります。私の方法は間違いなくシンプルで、動作しません（ボタンをクリックするとページが変わりません）。だから私のabout.htmはこのようになります（これはページの人々が訪れるである）

---

：このスクリプトでは

  <iron-selector 
       attr-for-selected="name" 
       selected="{{buttonSelected}}" 
       fallback-selection="who" 
       class="f-column f-column_3 f-column_mobile_2"> 
       <button class="f-button-group__button" name="manifesto">Manifesto</button> 
       <button class="f-button-group__button" name="who">Who we are</button> 
       <button class="f-button-group__button" name="team">Team</button> 
      </iron-selector> 

：

<about-buttons selected="{{who}}"> 
    </about-buttons> 

    <about-iron-pages attr-for-selected="name" selected="{{who}}" fallback-selection="who"> 
     <about-us name="who"> 
     </about-us> 
     <about-manifesto name="manifesto"> 
     </about-manifesto> 
     <about-team name="team"> 
     </about-team>  
    </about-iron-pages> 

私about-buttons.htmは、このようになります

<script> 
    Polymer({ 
    is: 'about-buttons', 
    properties: { 
     buttonSelected: { 
      type: String, 
      notify: true, 
      value: 'who' 
     } 
    } 
    }); 
</script> 

そして、ここではiron-pagesの私のバージョンです：すでに指摘したように

<dom-module id="about-iron-pages"> 
    <template> 
     <style> 
      :host { 
       display: block; 
      } 
      :host > ::content > :not(.iron-selected) { 
       display: none !important; 
      } 
     </style> 
     <content> 
     </content> 
    </template> 
    <script> 
     Polymer({ 
      is: 'about-iron-pages', 
      behaviors: [ 
      Polymer.IronResizableBehavior, 
      Polymer.IronSelectableBehavior 
      ], 

      properties: { 
      activateEvent: { 
       type: String, 
       value: null, 
      } 
      }, 
      observers: [ 
      '_selectedPageChanged(selected)' 
      ], 
      _selectedPageChanged: function(selected, old) { 
      this.async(this.notifyResize); 
      } 
     }); 
    </script> 
</dom-module> 

Answer 1

、<about-buttons selected="...">であなたの属性は、実際のプロパティ名と一致していません。 <about-buttons>.buttonSelectedのために、あなたの属性はbutton-selectedをする必要があり、それが働いてセレクタ（plunker）を取得するために必要なあなたのコードへの変更のみです：場合は、それ以外の

<about-buttons button-selected="{{who}}" ...> 

おそらく<about-buttons>と<about-iron-pages>のためのあなたの必要性をより多くのコンテキストがありますが、しかし、あなたはタブ付きビューを実装しようとしているだけで、Polymerのコンポーネントを使うことができます。 具体的には、<about-buttons>は、<paper-tabs>と<about-iron-pages>によって置き換えられました。<iron-pages>（plunker）です。