使用 Polymer 创建切换菜单

Question

我正在尝试使用 Polymer 创建一个切换菜单。 我想要的很简单，当我单击一个项目时，我只想显示相关的 div 作为内容。 我正在使用 core-scalffold 元素，它为您提供菜单和内容布局。

使用聚合物组件和事件实现这一目标的最佳方法应该是什么？

 <core-scaffold>
  <core-header-panel navigation flex>
    <core-toolbar id="navheader">
    </core-toolbar>
    <core-menu>
      <core-item label="Content 1"></core-item>
      <core-item label="Content 2"></core-item>
    </core-menu>
  </core-header-panel>

  <span tool>Title</span>

  <div class="content1">
      Hi there content1!
  </div>
   <div class="content2">
      Hi there content2!
  </div>
</core-scaffold>

Answer 1

core-pages 元素提供了一种制作可选择部分的方法，因此这是内容 div 的不错选择。然后，由于core-menu 和core-pages 都具有selected 属性，因此很容易将这两个元素绑定在一起。要使用 Polymer 数据绑定，我们必须使用模板。如果我们把整个东西放在一个自动绑定模板中，我们会得到这样的结果：

<template is="auto-binding">

  <core-scaffold>

    <core-header-panel navigation flex>
      <core-toolbar id="navheader">
      </core-toolbar>
      <core-menu selected="0" selectedIndex="{{selected}}">
        <core-item label="Content 1"></core-item>
        <core-item label="Content 2"></core-item>
      </core-menu>
    </core-header-panel>

    <span tool>Title {{selected}}</span>

    <core-pages selected="{{selected}}">
      <div class="content1">
          Hi there content1!
      </div>
      <div class="content2">
          Hi there content2!
      </div>
    </core-pages>

  </core-scaffold>

</template>

注意：我绑定了core-menu 的selectedIndex 属性，所以我可以使用selected 设置默认值。

http://jsbin.com/wivec/1/edit

如果您真的想要一个使用事件而不是绑定的解决方案，请告诉我。