Polymer 聚合物导航抽屉双击打开_Polymer

Polymer 聚合物导航抽屉双击打开

polymer

Polymer 聚合物导航抽屉双击打开,polymer,Polymer,我按照polymer演示创建了一个带有图标的导航抽屉，单击即可打开。演示只需单击一次即可打开导航抽屉，但当我用自己的代码尝试时，需要双击才能打开。有什么原因吗？我直接从演示中复制了代码。函数openDrawer（）看起来正确，但双击打开抽屉。我不知道为什么它不会在第一次点击时打开 <body fullbleed> <template is="auto-binding" id="tmp"> <core-drawer-panel id="drawerPanel"

我按照polymer演示创建了一个带有图标的导航抽屉，单击即可打开。演示只需单击一次即可打开导航抽屉，但当我用自己的代码尝试时，需要双击才能打开。有什么原因吗？我直接从演示中复制了代码。函数openDrawer（）看起来正确，但双击打开抽屉。我不知道为什么它不会在第一次点击时打开

<body fullbleed>
<template is="auto-binding" id="tmp">
    <core-drawer-panel id="drawerPanel">
        <core-header-panel drawer id="drawer" mode="seamed">
            <core-toolbar id="navheader">
                <span>Menu</span>
            </core-toolbar>
            <core-menu selected="{{option}}" valueattr="data-category">

            </core-menu>
        </core-header-panel>
        <core-header-panel main id="main" mode="seamed">

            <core-toolbar id="mainheader">
                <paper-icon-button id="navicon" icon="menu" onclick="openDrawer()"></paper-icon-button>
                <span flex>Booklet</span>
            </core-toolbar>


        </core-header-panel>
    </core-drawer-panel>
    </template>

    <script>
        document.addEventListener('polymer-ready', function() {
            var pageStart = document.querySelector('#tmp');
            pageStart.option = 'home';

        });

        function openDrawer() {
            var navicon = document.getElementById('navicon');
            var drawerPanel = document.getElementById('drawerPanel');
            navicon.addEventListener('click', function() {
                drawerPanel.togglePanel();
            });
        }

    </script>

</body>


菜单
小册子
document.addEventListener（'polymer-ready'，function（）{
var pageStart=document.querySelector（'#tmp'）；
pageStart.option='home'；
});
函数openDrawer（）{
var navicon=document.getElementById（'navicon'）；
var paperpanel=document.getElementById（'paperpanel'）；
navicon.addEventListener（'click'，function（）{
DroperPanel.togglePanel（）；
});
}

我看到一些问题

由于自动绑定模板中包含所有内容，因此需要侦听

模板绑定

，而不是

聚合物就绪

。只有当

模板绑定

激发时，元素才会被标记到DOM

另一个问题是，您正在

openDrawer

方法中添加单击侦听器。您希望在

模板绑定的

处理程序中添加单击侦听器


菜单
福
酒吧
巴兹
小册子
document.addEventListener（'template-bound'，function（）{
var navicon=document.getElementById（'navicon'）；
var paperpanel=document.getElementById（'paperpanel'）；
navicon.addEventListener（'click'，function（）{
DroperPanel.togglePanel（）；
});
});

你在用什么浏览器？我在用谷歌Chrome，请给我们看一些代码

<body fullbleed>
  <template is="auto-binding" id="tmp">
    <core-drawer-panel id="drawerPanel">
      <core-header-panel drawer id="drawer" mode="seamed">
        <core-toolbar id="navheader">
          <span>Menu</span>
        </core-toolbar>
        <core-menu selected="{{option}}" valueattr="data-category">
          <core-item>Foo</core-item>
          <core-item>Bar</core-item>
          <core-item>Baz</core-item>
        </core-menu>
      </core-header-panel>
      <core-header-panel main id="main" mode="seamed">

        <core-toolbar id="mainheader">
          <paper-icon-button id="navicon" icon="menu"></paper-icon-button>
          <span flex>Booklet</span>
        </core-toolbar>


      </core-header-panel>
    </core-drawer-panel>
  </template>

  <script>
    document.addEventListener('template-bound', function() {
      var navicon = document.getElementById('navicon');
      var drawerPanel = document.getElementById('drawerPanel');
      navicon.addEventListener('click', function() {
        drawerPanel.togglePanel();
      });
    });
  </script>


</body>