Polymer 中的嵌套模板答案

【问题标题】：Nested templates in PolymerPolymer 中的嵌套模板
【发布时间】：2015-08-01 17:03:35
【问题描述】：

我正在尝试将嵌套模板与聚合物一起使用，但我无法获得所有具有 menu--item__has_submenu 类的元素。

代码：

<template>
   <nav class="page-nav">
     <button class="menu--link close_menu" on-click="_toggleMenu">
       <div class="menu--icon">
         <br-icons class="nav-btn-icon" icon="br-icons:close"></br-icons>
       </div>
     </button>
     <ul class="menu js-menu">
       <template is="dom-repeat" items="{{items}}">
         <li class="menu--item menu--item__has_submenu" on-click="_toggleSubmenu">
           <a href="{{item.link}}" class="menu--link" title="{{item.label}}">
             <div class="menu--icon" data-icon="{{item.icon}}">
               <br-icons icon="br-icons:user"></br-icons>
             </div>
             <span class="menu--text">{{item.label}}</span>
           </a>            
           <ul class="submenu">
             <template is="dom-repeat" items="{{item.submenu}}">
               <li class="submenu--item">
                 <a href="{{item.link}}" class="submenu--link">{{item.label}}</a>
               </li>
             </template>
           </ul>
         </li>
       </template>
     </ul>
   </nav>
 </template>


Polymer({
   is: 'br-nav',
   properties: {
     items: {
       type: Array,
       value: []
     }
   },

   ready: function () {           

   },

   _toggleMenu: function () {
     Polymer.dom(this).classList.toggle('page-nav__opened');
   },

   _toggleSubmenu: function(e){
     console.log(Polymer.dom(this).querySelectorAll('menu--item__has_submenu'));
     //returns empty array
   },

 });

【问题讨论】：

标签： polymer shadow-dom

【解决方案1】：

我明白了！

我用 id 设置了ul 标签，然后执行了以下操作：

_toggleSubmenu: function(e){
   console.log(Polymer.dom(this.$.ulId).querySelectorAll('.menu--item__has_submenu'));
   //returns an array of elements

},

【讨论】：