Question

我正在使用聚合物2.0。我在页面上呈现了可折叠内容：

    <template is="dom-if" if="[[smallScreen]]">
        <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
          <a>
            <span>users</span>
            <paper-icon-button icon="icons:expand-more" on-tap="expandClicked" role="button" aria-controls="collapse"></paper-icon-button>
          </a>
          <iron-collapse id="collapse">
            <a name="user-overview" href="#/usr/user-overview">user Overview</a>
            <a name="user-history" href="#/usr/user-history">user History</a>
            <a name="user-detail" href="#/isr/user-detail">user Detail</a>
          </iron-collapse>            
        </iron-selector>
    </template>

以下是Polymer脚本：

    expandClicked(event) {
        this.$.collapse.toggle();
    }

当我单击元素以折叠/展开它时，在浏览器控制台中报告以下错误：

user-app.js:49 Uncaught TypeError: Cannot read property 'toggle' of undefined
    at HTMLElement.expandClicked (user-app.js:49)
    at HTMLElement.handler (template-stamp.html:92)
    at Object._fire (gestures.html:535)
    at Object.forward (gestures.html:830)
    at Object.click (gestures.html:811)
    at HTMLElement._handleNative (gestures.html:333)

请指导如何访问聚合物脚本中的dom-if节点以展开或折叠它们。

Answer 1

Polymer抛出错误的原因是您的iron-collapse不是静态节点，而是动态节点。

另一个模板中的任何内容都是动态节点，而this.$只能用于静态节点。

要搜索动态节点，您应使用this.shadowRoot.querySelector(selector)。

您可以查看documentation了解详情。

无法访问dom中的节点内容 - 如果在聚合物2.x中

1 个答案: