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>

注意：我绑定了selectedIndex的{{1}}属性，因此我可以使用core-menu来设置默认值。

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

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

使用Polymer创建切换菜单

1 个答案: