Polimer demir-sayfaları ile değiştir sayfa başlığı

Question

I (kendi Github page itibaren) iron-pages demo uygulaması kullandığınızı varsayalım sayfa. Yani <div>One</div> için - selected One'u eklemek istiyorum. Elimde ne

bugüne kadar rota seçildiğinde routing.html değişikliği yapmaktır ama burada değişiklik yapmak için biraz garip görünüyor. Bunu yapmanın başka yolları var mı?

Answer 1

burada benim Polimer bileşeninin <page-title> bakmak gerekir: https://github.com/zacharytamas/page-title/. Siz de Bower ile yükleyebilirsiniz:

bower install page-title --save 

Olasılıkla size başlığı olarak göstermek istediğiniz metne <iron-pages> seçilen endeksi eşleyen fonksiyon çeşit isterdi. Örneğinizde, seçilen öğenin yalnızca innerText olmasını sağlayabilirsiniz, ancak pratikte, <iron-pages> öğelerinizde bunların içeriği gerçekten olacaktır.

Bu kurulumuna bağlı olacaktır ancak kolayca, böyle bir şey onları bağlamak için benim bileşeni kullanabilirsiniz: Sadece title sayfanın başlığını bağlamak için bazı fanciness yaptık İşte

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

o anda seçili öğenin özniteliği <iron-pages>'dan. Oldukça iyi çalışıyor! Durumunuza uyum sağlamanız gerekebilir, ancak bu sizin gitmenizi sağlamalıdır.

Answer 2

başlık elemanının değeri değerine göre hesaplanan bir özellik olabilir {{seçilen}} yani:

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

// elemanın açıklayıcı kısım

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

// zorunlu kısım

Polymer({ 

is: 'myTitle', 

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

    currentSelection: { 
     type: Number 
    } 
}, 

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

});