Question

Polymer文档的transform navigation demo部分中描述的responsive-navigation-pattern使用array items来构建一个使用两次的单个菜单（{{1}并在app-drawer）。查看来源here。

简化示例如下所示：

app-header

这是初始化菜单项的脚本的一部分：

<app-drawer-layout>
  <app-drawer>
    <paper-menu>
      <!-- MENU ITEMS -->
    </paper-menu>
  </app-drawer>
  <app-header-layout>
    <app-header>
      <app-toolbar>
        <div main-title>App name</div>

        <paper-tabs>
          <!-- SAME MENU ITEMS HERE -->
        </paper-tabs>
      </app-toolbar>
    </app-header>

    main content

  </app-header-layout>
</app-drawer-layout>

在不使用数组的情况下，仅将菜单初始化一次的更好方法是什么？

将菜单定义为新的items: { type: Array, value: function() { return ['Item One', 'Item Two', 'Item Three', 'Item Four', 'Item Five']; } }会很棒，但这不起作用我猜是因为在抽屉中这些是element项目，而在标题中这些是paper-menu。

Answer 1

创建一个显示项目数组的新元素。将项中的数据绑定到元素属性 display-items 。您还应该有一个属性来传播所选项目。

<item-menu display-items=[[items]] selected-item={{selectedItem}}></item-menu>


<app-drawer-layout>
  <app-drawer>
    <paper-menu>
      <item-menu display-items=[[items]] selected-item={{selectedItem}}></item-menu>
    </paper-menu>
  </app-drawer>
  <app-header-layout>
    <app-header>
      <app-toolbar>
        <div main-title>App name</div>

        <paper-tabs>
          <item-menu display-items=[[items]] selected-item={{selectedItem}}></item-menu>
        </paper-tabs>
      </app-toolbar>
    </app-header>

    main content

  </app-header-layout>
</app-drawer-layout>

Ps：此代码仅演示如何将数组项的值传播到多个聚合物元素。我假设您熟悉创建新的聚合物元素并将其导入您的应用程序。

如何在app-drawer和app-header中使用相同的菜单项？

1 个答案: