聚合物内置方式使用“子页面”和核心子菜单？

Question

我试图创建一个页面core-submenu（因此也“子页面”（不是一个真正的组件））。但正如我在网络上看到的那样，这有一个“问题”，因为按下core-submenu项目将触发selected事件，即使自然地人们只希望在按下子元素时触发它。

我发现这个link解释了一种实现我想要的方法，但是这种方法依赖于所有页面上的ID和子页面的。我不需要“循环” - 生成我的菜单。通过不使用core-submenu一切工作都没有丝毫的JavaScript代码。

是否有可以使用的核心页面和核心子菜单的内置支持？换句话说：一种不需要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

尝试使用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> 

Answer 2

那么，你可以抛弃一个“共享选择”的想法，而是有“核心选择”事件响应的东西。

这将工作得很好。

<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>