Полимерный ящик-панель не закрыт

Question

У меня есть ядро-ящик-панель с основным меню. Я могу открыть drawerPanel, когда я нажимаю на пункт меню. Проблема, с которой я сталкиваюсь, заключается в том, что когда я нажимаю на элемент в панели ящика, он не закрывается. Я добавил код javascript внизу, скопированный из демо-версии спа на полимере-проектах, но он все еще не закрывается.

<template is="auto-binding" id="template"> 
    <core-drawer-panel id="drawerPanel"> 
     <core-header-panel drawer id="drawer"> 
      <core-toolbar id="navheader"> 
       <span>Menu</span> 
      </core-toolbar> 
      <core-menu selected="{{option}}" on-core-selected="{{selectedOption}} valueattr="data-category"> 
       core-items... 
      </core-menu> 
     </core-header-panel> 
    </core-drawer-panel> 
</template> 

<script> 
    var template = document.querySelector('#template'); 
    var navicon = document.getElementById('navicon'); 
    var drawerPanel = document.getElementById('drawerPanel'); 

    navicon.addEventListener('click', function() { 
     drawerPanel.togglePanel(); 
    }); 

    template.selectedOption = function(detail) { 
     if(detail.isSelected) { 
      drawerPanel.close(); 
     } 
    } 
</script>  

Answer 1

Вы должны слушать для template-bound события, прежде чем вы можете querySelector или добавить слушателей к чему-либо внутри шаблона. Попробуйте переписать его так:

<script> 
    var template = document.querySelector('#template'); 
    template.addEventListener('template-bound', function() { 
     var navicon = document.getElementById('navicon'); 
     var drawerPanel = document.getElementById('drawerPanel'); 

     navicon.addEventListener('click', function() { 
      drawerPanel.togglePanel(); 
     }); 

     this.selectedOption = function(detail) { 
      if(detail.isSelected) { 
       drawerPanel.close(); 
      } 
     } 
    }); 
</script>