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

Question

Polymer通过id via提供对元素的访问this.$['foo'].但是,我发现我无法通过嵌套模板中的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>

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

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