嵌套模板内部的聚合物访问元素（按 ID）答案

【问题标题】：Polymer Access Element Inside of Nested Template by Id嵌套模板内部的聚合物访问元素（按 ID）
【发布时间】：2014-07-03 18:43:41
【问题描述】：

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

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

在这种情况下，this.$.foo 有效，但 this.$.bar 无效。您是否可以通过 id 访问嵌套模板中的元素？如果可以，如何访问？

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

【问题讨论】：

见github.com/Polymer/docs/issues/460。 this.$.<id> 仅适用于静态节点。另一个内部<template> 中的任何内容都由系统动态标记。
@ebidel 我制作了一个example，详细说明了使用内部<template> 标签和this.$ 中的值的一些可能方法。如果模板标签具有repeat 或if 属性，并且可以在ready 运行之前评估if 属性，那么任何id 都会添加到this.$。我的问题正在发生，因为我使用的是带有连字符属性的条件模板，但我不知道 how to use hyphenated attributes in the template。

标签： nested polymer

【解决方案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>

按下“更改内容”按钮可找到#foo 和#bar <div>s 并更新包含的<p>s 的文本。

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

【讨论】：

添加文本<p>Old bar</p> 是否足以使内部模板非-惰性？
这如何与 ES6 类一起工作？我找不到任何关于此的参考