I'm trying to use nested templates with polymer but I can not get all the elements that have the class menu--item__has_submenu.
The code:
<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
},
});
I got it!
I set the ul tag with an id and then did the following:
_toggleSubmenu: function(e){
console.log(Polymer.dom(this.$.ulId).querySelectorAll('.menu--item__has_submenu'));
//returns an array of elements
},
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments