Wie man Eisen-Selektor richtig an Eisen-Seiten bindet?

Question

Ich versuche, die gleiche grundlegende Aufgabe wie diese andere Frage zu tun, iron-selector selected={{}} binding with iron-pages selected={{}}, aber ich glaube, mein Fall muss anders sein, da ich die Lösung nicht replizieren kann.

Ich möchte ein Menü mit Schaltflächen mit iron-selector, und wenn Sie darauf klicken, sollte der Inhalt mit iron-pages ändern. So

Ich habe die aktuelle Seite about.htm, die mit 1 webcomponent für das Button-Menü hat, about-buttons.htm genannt und dann 1 webcomponent für jede Seite, die nach dem Knopf geladen werden soll, wird durch den Benutzer gedrückt; about-who.htm, about-manifesto und about-team.

Meine Frage ist:

Wie kann ich mit dieser Struktur meiner Web-Komponenten binden meine Tasten mit meinen Seiten - und/oder warum ist meine aktuelle Methode falsch?

Es gibt viele verschiedene Möglichkeiten, um eine einfache Datenbindung wie folgt durchzuführen. Meine Methode hier ist definitiv nicht einfach, und es funktioniert nicht (durch Klicken auf Schaltflächen ändern sich die Seiten nicht).

---

Also meine about.htm sieht wie folgt aus (und das ist die Seite Menschen besuchen):

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

Meine about-buttons.htm wie folgt aussieht:

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

Mit diesem Skript:

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

Und hier ist meine Version von 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

Wie bereits erwähnt, das Attribut in <about-buttons selected="..."> nicht den Namen tatsächlichen Eigenschaft entspricht. Für <about-buttons>.buttonSelected sollte Ihr Attribut button-selected sein, und das ist die einzige Änderung an Ihrem Code erforderlich arbeiten, um die Wähler zu bekommen (plunker):

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

Vielleicht gibt es mehr Kontext zu Ihrem Bedürfnis nach <about-buttons> und <about-iron-pages>, aber ansonsten, wenn Wenn Sie nur eine Registerkartenansicht implementieren möchten, können Sie nur die Komponenten von Polymer verwenden. Konkret kann <about-buttons> durch <paper-tabs> und <about-iron-pages> durch <iron-pages> (plunker) ersetzt werden.