Polymer - 带有app-header的动态页面标题

Question

我正在使用Polymer App Toolbox中的app-drawer-layout,而不是使用固定的标题<div main-title>My App</div>,我想让它与iron-pages-navigation 一起动态工作.

理想情况下,我想在加载的每个元素中指定标题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';
    }
    ...
}