聚合物 - 帶應用程序頭的動態頁面標題

Question

我使用聚合物應用程序工具箱中的應用程序抽屜佈局，而不是在<div main-title>My App</div>中使用固定標題，我想讓它動態地與iron-pages一起工作 - 導航。

理想情況下，我想指定在iron-pages中加載的每個元素中的標題，但是在導航中定義它也是一個解決方案。然而，我有點卡住，因爲我所做的任何嘗試似乎都沒有奏效。

我的代碼如下所示：

<app-header condenses fixed effects="waterfall"> 
    <app-toolbar> 
    <paper-icon-button icon="mdi:menu" drawer-toggle></paper-icon-button> 
    <div main-title>My App</div> 
    </app-toolbar> 
</app-header> 

<iron-pages role="main" selected="[[page]]" attr-for-selected="name"> 
    <moso-profile name="profile"></moso-profile> 
    <moso-resume name="resume"></moso-resume> 
    <moso-portfolio name="portfolio"></moso-portfolio> 
    <moso-contact name="contact"></moso-contact> 
</iron-pages> 

現在，我已經使用<content select=".page-title"></content>（Polymer Docs），然後在每個加載元素的<div class="page-title">New title</div>嘗試。沒有工作。

我也嘗試添加一個title屬性，每個元素iron-pages（像這樣：<moso-profile title="Profile" name="profile"></moso-profile>），然後嘗試將其綁定單向/雙向與[[page.title]]，沒有運氣無論是。

我做錯了什麼？還是不可能了？

Answer 1

爲什麼不是這樣的？

<app-header condenses fixed effects="waterfall"> 
    <app-toolbar> 
    <paper-icon-button icon="mdi:menu" drawer-toggle></paper-icon-button> 
    <div main-title>{{page}}</div> 
    </app-toolbar> 
</app-header> 

<iron-pages role="main" selected="[[page]]" attr-for-selected="name"> 
    <moso-profile name="profile"></moso-profile> 
    <moso-resume name="resume"></moso-resume> 
    <moso-portfolio name="portfolio"></moso-portfolio> 
    <moso-contact name="contact"></moso-contact> 
</iron-pages> 

，或者如果你想控制的稱號更可以使用計算功能：

<app-header condenses fixed effects="waterfall"> 
    <app-toolbar> 
    <paper-icon-button icon="mdi:menu" drawer-toggle></paper-icon-button> 
    <div main-title>{{_computeTitle(page)}}</div> 
    </app-toolbar> 
</app-header> 

，並在javascript：

_computeTitle: function(page) { 
    if (page == 'profile') { 
     return 'My Profile'; 
    } 
    ... 
}