应用程序抽屉内的奇怪参考错误

Question

我在使用 JS 引用应用程序抽屉中的元素时遇到问题。只要我的函数引用了 app-drawer 之外的元素，就没有问题。但是每当我想更改 app-drawer 中的元素时，我都会收到 'undefined' TypeError。我做了一个缩小的箱子 here.

重现问题的步骤

单击 caron（图标）。在这里你可以看到出现了一个列表。
点击文字click to toggle drawer切换抽屉
你会注意到抽屉里还有一个 caron。
当您在抽屉中单击 caron 时，应该会出现一个类似的列表，但实际上并没有。相反，控制台中出现错误。

<!doctype html>

<head>
  <meta charset="utf-8">
  <base href="http://polygit.org/polymer+:master/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
  <link rel="import" href="iron-media-query/iron-media-query.html">
  <link rel="import" href="app-layout/app-drawer-layout/app-drawer-layout.html">
  <link rel="import" href="app-layout/app-drawer/app-drawer.html">
  <link rel="import" href="app-layout/app-scroll-effects/app-scroll-effects.html">
  <link rel="import" href="app-layout/app-header/app-header.html">
  <link rel="import" href="app-layout/app-header-layout/app-header-layout.html">
  <link rel="import" href="app-layout/app-toolbar/app-toolbar.html">
</head>

<body>

  <dom-module id="x-foo">
    <template>
      <style>
        app-drawer {
          background-color: green;
          color: blue;
        }
        span {
          font-size: 2rem;
          color: green
        }
        span:last-of-type {
          position: relative;
          font-size: 3.5rem;
          top: 1.5rem;
          left: .5rem;
          color: red
        }
        #headerList,
        #drawerList {
          display: none;
        }
        h1 {
          color: orange
        }
        h2 {
          color: blue;
        }
      </style>
      <iron-media-query query="max-width: 1024px" query-matches="{{smallScreen}}"></iron-media-query>
      <app-drawer-layout drawer-width="300px" fullbleed force-narrow>
        <app-drawer swipe-open opened="false">
          <div class="drawer-contents">
            <template is="dom-if" if=[[smallScreen]]>
              <h2>(this is app-drawer)</h2>
              <span>tap the glyph inside app-drawer:</span>
              <span on-tap="tapGlyph1">&#711;</span>
              <ul class="myList" id="drawerList">
                <li>Austria</li>
                <li>Switzerland</li>
                <li>Slovenia</li>
              </ul>
            </template>
          </div>
        </app-drawer>
        <app-header-layout>
          <app-header>
            <app-toolbar main-title>
              <h1 drawer-toggle>click to toggle drawer</h1>
            </app-toolbar>
            <h2>(this is app-header)</h2>
            <span>tap a glyph inside app-header:</span>
            <span on-tap="tapGlyph2">&#711;</span>
            <ul id="headerList">
              <li>Australia</li>
              <li>Switzerland</li>
              <li>Slovenia</li>
            </ul>
          </app-header>
        </app-header-layout>
      </app-drawer-layout>
    </template>
    <script>
      Polymer({
        is: 'x-foo',
        tapGlyph1: function() {
          this.$.drawerList.style.display = "block";
        },
        tapGlyph2: function() {
          this.$.headerList.style.display = "block";
        }
      });
    </script>
  </dom-module>

  <x-foo></x-foo>

</body>

Answer 1

问题不是 app-drawer，而是 dom-if。 dom-if 或 dom-repeat 中的 Elements/Markups 是动态生成的，因此无法通过 id 使用散列来访问。为了访问它们，需要使用等同于 querySelector 的 $$ 选择器。你可以阅读它 here

使用

更改代码

this.$$('#drawerList') 应该可以解决您的问题

应用程序抽屉内的奇怪参考错误

Weird reference error just inside app-drawer

dom

polymer

polymer-1.0