Question

Polymer通过this.$['foo']按ID提供对元素的访问。但是，我发现我无法通过嵌套模板中的id访问元素。

<template>
  <div id="foo"></div>
  <template>
    <div id="bar"></div>
  </template>
</template>

在这种情况下，this.$.foo有效但this.$.bar没有。您是否能够通过id访问嵌套模板内的元素，如果是这样的话？

在我的代码中，如果属性为true，我正在使用条件模板来包含一些html。我通过编辑html在javascript中提供此功能，但认为条件模板更清楚地显示了正在发生的事情，我更愿意使用此方法。

Answer 1

使用this.$.<id>语法可以使用内部模板。您的示例中的问题是内部<template>是惰性的，并且它没有被渲染。我重写了您的示例，以便内部<template> 被呈现，您可以看到this.$.<id>语法适用于外部<template> } S：

<polymer-element name="my-element">
  <template>
    <div id="foo">
      <p>Old foo</p>
      <template if="{{showBar}}">
        <div id="bar">
          <p>Old bar</p>
        </div>
      </template>
    </div>
    <button on-tap="{{changeContent}}">Change Content</button>
  </template>
  <script>
    Polymer({
      showBar: true,
      changeContent: function() {
        this.$.foo.querySelector('p').textContent = 'New foo';
        this.$.bar.querySelector('p').textContent = 'New bar';
      }
    });
  </script>
</polymer-element>

按＆＃34;更改内容＆＃34;按钮找到#foo和#bar <div>并更新包含的<p>的文本。

您可以在http://jsbin.com/roceta/edit处尝试答案。

嵌入式模板内的聚合物访问元素

1 个答案: