Polymer 1.x：强制访问 dom-if 模板内的 DOM 节点

Question

我想通过 id 访问 dom-if 模板中的 DOM 节点。使用我现有的代码，我希望在尝试将这些节点转换为布尔值时看到 true，但我得到的是 false（即 undefined）。

重现问题的步骤：

Open this jsBin.
通过显示 Foo 和 Bar 而未显示 Baz，了解右侧的 HTML 窗格是否正常工作。
观察控制台并了解 id="foo" 节点可访问，但 id="bar" 和 id="baz" 元素不可访问。这就是我的问题。

如何强制访问这些节点？

http://jsbin.com/kemoravote/1/edit?html,控制台,输出

<!doctype html>
<head>
  <meta charset="utf-8">
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
  <link href="iron-form/iron-form.html" rel="import">
</head>
<body>

<dom-module id="x-element">

<template>
  <style></style>
  <div id="foo">Foo</div>
  <template is="dom-if" if="{{show}}">
    <div id="bar">Bar</div>
  </template>
  <template is="dom-if" if="{{!show}}">
    <div id="baz">Baz</div>
  </template>

</template>

<script>
  (function(){
    Polymer({
      is: "x-element",
      properties: {
        show: {
          type: Boolean,
          value: function() {
            return true;
          }
        }
      },
      attached: function() {
        console.log('foo', !!this.$.foo);
        console.log('bar', !!this.$.bar);
        console.log('baz', !!this.$.baz);
      },
    });
  })();
</script>

</dom-module>

<x-element></x-element>

</body>

Answer 1

$ 选择器将不起作用。您必须按如下方式使用 $$：

console.log('baz', !!this.$$('#baz'));

Here is the jsBin.

http://jsbin.com/xogediyato/1/edit?html,控制台,输出

<!doctype html>
<head>
  <meta charset="utf-8">
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
  <link href="iron-form/iron-form.html" rel="import">
</head>
<body>

  <dom-module id="x-element">

    <template>
      <style></style>
      <div id="foo">Foo</div>
      <template is="dom-if" if="{{show}}">
        <div id="bar">Bar</div>
      </template>
      <template is="dom-if" if="{{!show}}">
        <div id="baz">Baz</div>
      </template>

    </template>

    <script>
      (function(){
        Polymer({
          is: "x-element",
          properties: {
            show: {
              type: Boolean,
              value: function() {
                return true;
              }
            }
          },
          attached: function() {
            console.log('foo', !!this.$.foo);
            console.log('bar', !!this.$.bar);
            console.log('baz', !!this.$.baz);
            console.log('bar', !!this.$$('#bar'));
            console.log('baz', !!this.$$('#baz'));
          },
        });
      })();
    </script>

  </dom-module>

  <x-element></x-element>

</body>

Polymer 1.x：强制访问 dom-if 模板内的 DOM 节点

Polymer 1.x: Imperatively accessing DOM nodes inside a dom-if template

polymer

polymer-1.0

dom-if