Question

我在使用JS引用app-drawer中的元素时遇到问题。只要我的函数引用app-drawer之外的元素，就没有问题。但每当我想改变app-drawer中的元素时，我就会得到一个未定义的＆＃39; TypeError为它。我已经减少了一个箱子here。

重现问题的步骤

点击caron（图标）。在这里，您可以看到列表出现。
点击文字click to toggle drawer以切换抽屉
你会在抽屉里发现另一个caron。
当您点击抽屉中的caron时，会出现类似的列表，但事实并非如此。相反，控制台出现错误。

＆＃13;

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

＆＃13;

Answer 1

问题不是app-drawer，而是dom-if。 dom-if或dom-repeat内的元素/标记是动态生成的，因此无法使用hash by id进行访问。要访问它们，需要使用相当于$$的{{1}}选择器。你可以阅读它here

使用

更改代码

querySelector应解决您的问题

app-drawer里面奇怪的引用错误

1 个答案: