nested - 嵌套模板中的 polymer 访问元素(按ID)

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>:

<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>，并更新包含的 <p>的文本。

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