Polymer - Änderung Seitentitel mit Eisen-Seiten

Question

Lets sagen, dass ich die Demo-Implementierung von iron-pages habe (von seinem Github page):

<iron-pages selected="0"> 
    <div>One</div> 
    <div>Two</div> 
    <div>Three</div> 
</iron-pages> 

<script> 
    document.addEventListener('click', function(e) { 
    var pages = document.querySelector('iron-pages'); 
    pages.selectNext(); 
    }); 
</script> 

Nun, ich mag ein Suffix des Seitentitel hinzufügen die ausgewählten widerzuspiegeln Seite. Also für <div>One</div> möchte ich anhängen - selected One und so weiter.

Was ich bisher habe ist die Änderung in routing.html, wenn die Route ausgewählt wurde, aber es scheint ein bisschen seltsam, die Änderung hier zu machen. Gibt es andere Möglichkeiten, dies zu tun?

Answer 1

Sie sollten <page-title> hier einen Blick auf meine Polymerkomponente nehmen: https://github.com/zacharytamas/page-title/. Sie können es mit Bower, installieren:

bower install page-title --save 

wahrscheinlich, dass Sie irgendeine Art von Funktion wollen würde, die den ausgewählten Index aus <iron-pages> Karten in Text Sie als Titel angezeigt werden sollen. In Ihrem Beispiel könnten Sie nur die innerText des ausgewählten Elements, aber in der Praxis Ihre <iron-pages> Elemente würden tatsächlich Inhalt in ihnen haben.

Dies wird von Ihrem Setup ab, sondern Sie meine Komponente sie leicht binden so etwas wie dies nutzen könnten,: den Titel der Seite der title

<dom-module id="my-app"> 
    <template> 

    <page-title base-title="My Website" 
     title="[[selectedPage.title]]"></page-title> 

    <iron-pages selected-item="{{selectedPage}}"> 
     <div title="First Page">One</div> 
     <div title="Second Page">Two</div> 
     <div title="Third Page">Three</div> 
    </iron-pages> 

    </template> 
    <script> 
    Polymer({ 
     is: 'my-app' 
    }); 
    </script> 
</dom-module> 

Hier habe ich nur einige fanciness getan habe zu binden Attribut des aktuell ausgewählten Elements aus <iron-pages>. Es funktioniert ziemlich gut! Sie müssen sich vielleicht an Ihre Situation anpassen, aber das sollte Sie weiterbringen.

Answer 2

Der Wert Ihrer Titelelement eine berechnete Eigenschaft basierend auf dem Wert von {{ausgewählt}}, dh sein kann:

<myTitle text={{title}} currentSelection={{selected}}></myTitle> 

// deklarative Teil des Elements

<dom-module id="myTitle"> 
<template> 
    <div>{{title}}</div> 
</template> 
</dom-module> 

// Imperativ Teil

Polymer({ 

is: 'myTitle', 

properties: { 
    title: { 
     type: String, 
     computed: 'generateTitle' 
    }, 

    currentSelection: { 
     type: Number 
    } 
}, 

'generateTitle': function(){ 
    return '- selected' + this.currentSelection; 
} 

});