Polymer Navigation Drawer 双击打开

Question

我按照 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>

Answer 1

我看到了一些问题。

因为您在自动绑定模板中拥有所有内容，所以您需要监听 template-bound 而不是 polymer-ready。只有当 template-bound 触发时你的元素才会被标记到 DOM.

另一个问题是您在 openDrawer 方法中添加了点击侦听器。您想要在 template-bound 处理程序中添加点击侦听器。

Here's a jsbin example

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

Polymer Navigation Drawer 双击打开

Polymer Navigation Drawer double click to open

polymer