Question

我已经按照聚合物演示创建了一个带有图标的导航抽屉，可以在点击时打开它。该演示只需要单击一下即可打开导航抽屉，但是当我使用自己的代码尝试时，需要双击才能打开。有什么理由吗？我已经从演示中直接复制了代码。 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>

聚合物导航抽屉双击打开

1 个答案: