高分子built-in的使用方法"sub-pages"和core-submenu？

Question

我正在尝试使用 core-submenu 创建一个页面（因此也是 "subpages" （不是真正的组件））。但正如我在网上看到的那样，有一个 "problem" ，因为按下 core-submenu 项目将触发 selected 事件，即使自然地人们只希望它在 [= =35=] 元素被按下。

我发现这个 link 解释了实现我想要的方法的方法，但这种方法依赖于所有页面上的 ID 和 core-submenu childs。我不需要 "loop"-生成我的菜单。通过不使用 core-submenu 一切正常，甚至没有丝毫 javascript-code.

是否有一些 built-in 支持可以使用的 core-pages 和 core-submenu？换句话说：一种不需要任何（或最少）使用 javascript?

的方式

.
. //some code here
.    
<core-menu theme="core-light-theme" selected="{{selected}}" selectedItem={{item}}>
        <core-submenu icon="settings" label="Favorites">
          <core-item icon="https" label="Hello"></core-item>
          <core-item icon="https" label="World"></core-item>
        </core-submenu>
    </core-menu>
.
. //some code here
.
    <core-animated-pages transitions="cross-fade" selected="{{selected}}">
      <section id="page-1">
        <div cross-fade>Hello content</div>
      </section>
      <section id="page-2">
        <div cross-fade>World content</div>
      </section>
    </core-animated-pages>
.
. //some code here
.

谢谢！

Answer 1

好吧，您可以放弃拥有 "shared selected" 的想法，取而代之的是拥有对 "core-select" 事件做出响应的东西。

这会很好用。

    <template is='auto-binding'>
    <core-scaffold>
        <core-header-panel navigation flex>
            <core-toolbar>Menu</core-toolbar>

            <core-menu on-core-select='{{navFunc}}'>

                <core-item label='page1'></core-item>

                <core-submenu label='something' type='submenu'>
                    <core-item label='page2'></core-item>
                    <core-item label='page3'></core-item>

                    <core-submenu label='super submenu' type='submenu'>
                        <core-item label='page4'></core-item>
                        <core-item label='page5'></core-item>
                    </core-submenu>

                </core-submenu>

                <core-submenu label='more here' type='submenu'>
                    <core-item label='page6'></core-item>
                    <core-item label='page7'></core-item>
                </core-submenu>

            </core-menu>

        </core-header-panel>

        <core-animated-pages selected='{{myselection}}' valueattr='label'>
            <section label='page1'>Page1</section>
            <section label='page2'>Page2</section>
            <section label='page3'>Page3</section>
            <section label='page4'>Page4</section>
            <section label='page5'>Page5</section>
            <section label='page6'>Page6</section>
            <section label='page7'>Page7</section>
        </core-animated-pages>

    </core-scaffold>
    </template>
    <script>
        var template = document.querySelector('template[is="auto-binding"]');

        template.navFunc = function(e, detail){
            if (detail.item.getAttribute('type') !== 'submenu' && detail.isSelected == true) {
                template.myselection = detail.item.getAttribute('label');
            }
        }
    </script>

Answer 2

尝试对 ex:

使用 valueattr

<core-menu theme="core-light-theme">
    <core-submenu icon="settings" label="Favorites"  valueattr="number" selected="{{number}}">
      <core-item icon="https" label="Hello" number="0"></core-item>
      <core-item icon="https" label="World" number="1"></core-item>
    </core-submenu>
      <core-submenu icon="settings" label="Favorites2"  valueattr="number" selected="{{number}}">
      <core-item icon="https" label="Hello2" number="2"></core-item>
      <core-item icon="https" label="World2" number="3"></core-item>
    </core-submenu>
</core-menu>
  <core-animated-pages transitions="cross-fade" selected="{{number}}">
  <section id="page-1">
    <div cross-fade>Hello content - {{number}}</div>
  </section>
  <section id="page-2">
    <div cross-fade>World content - {{number}}</div>
  </section>
      <section id="page-3">
    <div cross-fade>Hello content - {{number}}</div>
  </section>
  <section id="page-4">
    <div cross-fade>World content - {{number}}</div>
  </section>  
</core-animated-pages>

高分子built-in的使用方法"sub-pages"和core-submenu？

Polymer built-in way to use "sub-pages" and core-submenu?

javascript

polymer