代码之家 › 专栏 › 技术社区 › Alex Kimoto

应用程序抽屉内部出现奇怪的引用错误

polymer-1.0 polymer dom

Alex Kimoto · 技术社区 · 8 年前

我在使用JS引用应用程序抽屉中的元素时遇到问题。只要我的函数引用应用程序抽屉之外的元素,就没有问题。但每当我想更改应用程序抽屉中的元素时,我都会得到一个“未定义”的TypeError。我做了一个缩小的箱子 here .

复制问题的步骤

点击 caron (图标)。在这里,您可以看到一个列表。
点击文本 click to toggle drawer 打开抽屉
你会注意到另一个 卡隆 在抽屉里。
卡隆 在抽屉中,应该会出现类似的列表,但并没有。相反,控制台中有一个错误。

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

1 回复 | 直到 8 年前

a1626 8 年前

app-drawer 但是 dom-if .内部元素/标记 dom if 或 dom-repeat 是动态生成的,因此不能使用哈希id进行访问。为了访问它们,需要使用 $$ 选择器,相当于 querySelector .你可以读一下 here

使用更改代码

this.$$('#drawerList') 应该会解决你的问题