Polymer

Question

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

理想情况下，我想在 iron-pages 中加载的每个元素中指定标题，但在导航中定义它也是一种解决方案。但是，我有点卡住了，因为我所做的 none 尝试似乎奏效了。

我的代码如下所示：

<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>。没用。

我还尝试为 iron-pages 中的每个元素添加一个 title 属性（例如：<moso-profile title="Profile" name="profile"></moso-profile>），然后尝试 one/two 将其绑定[[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';
    }
    ...
}

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

Polymer - Dynamic page title with app-header

web-component

polymer-1.0