Polymer - change page name using iron pages

Question

Let's say I have a demo implementation of iron-pages (from a 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> 

Now I want to add a suffix to the page title to display the selected page. So for <div>One</div> I would like to add - selected One , etc.

Now I have to make changes to routing.html when a route has been selected, but it seems a little strange to make changes here. Are there any other ways to do this?

Answer 1

You should look at my polymer component <page-title> here: https://github.com/zacharytamas/page-title/ . You can also install it using Bower:

 bower install page-title --save 

You probably need some kind of function that maps the selected index from <iron-pages> to the text you want to show as the title. In your example, you can simply innerText selected element, but in practice your <iron-pages> elements will have content in them.

This will depend on your setup, but you can use my component to easily link them, for example:

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

Here, I just did some attachment to associate the page title with the title attribute of the currently selected element from <iron-pages> . It works very well! You may have to accept your situation, but this should make you.

Answer 2

The value of your title element can be a computed value based on the value of {{selected}}, ie:

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

// declarative part of the element

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

// imperative part

 Polymer({ is: 'myTitle', properties: { title: { type: String, computed: 'generateTitle' }, currentSelection: { type: Number } }, 'generateTitle': function(){ return '- selected' + this.currentSelection; } });