0

这是我的 jsBin。

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

重现问题的步骤：

  1. 打开这个 jsBin。
  2. Foo通过显示和Bar不显示来了解右侧的 HTML 窗格是否正常工作Baz。
  3. 观察控制台并了解id="foo"节点可访问，但id="bar"andid="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>
4

1 回答 1

0

选择$器不起作用。你必须使用$$如下：

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

这是 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>

于 2016-09-10T02:41:17.110 回答