以模板为内容的 polymer 自定义元素

Question

在下面的代码中，当我尝试以编程方式访问它或在 Chrome 中检查 DOM 时，template#bar 的内容“Foo”始终为空。谁能解释一下为什么？

一般来说，如何向内部元素提供在外部元素中定义的模板，以便内部元素可以访问内容并有条件地克隆或导入该内容？

我正在使用 polymer 0.4.2。

<polymer-element name="x-inner" noscript>
    <!--
        How can I access the content "Foo" of <template>Foo</template>,
        So that I can import/clone it here?

        Using <content> moves the template from x-outer to x-inner,
        but the template's .content property is empty, instead of 'Foo' as I expected.
     -->
    <content></content>
</polymer-element>

<polymer-element name="x-outer" noscript>
    <template>
        <x-inner>
            <!--
                How can I pass a template to a custom element?
                I don't want the contents of this template to be rendered
                here in x-outer, but instead conditionally rendered by x-inner
             -->
            <template id="bar">Foo</template>
        </x-inner>
    </template>
</polymer-element>

<x-outer></x-outer>

Answer 1

这个主题可能很复杂，下面是一些可以帮助您入门的内容。

(这是对此答案的第三次更新，确认了上面关于“复杂”=P 的部分)。

polymer 包括 TemplateBinding.js图书馆。

TemplateBinding.js图书馆灌输 <template>具有众多功能，包括数据绑定(bind)到模型、条件标记和通过数组进行复制/迭代。它还添加了一项功能，即克隆的嵌套模板不会复制它们自己的内容，从而防止在迭代时可能出现无用节点的爆炸。相反，TemplateBinding.js在克隆嵌套模板中创建对原始内容丰富模板的引用。结果是，如果您使用 TemplateBinding.js你应该使用 template.createInstance() API 以获得最佳结果。

现在，当使用没有 TemplateBinding.js 的原始模板时, 您可以简单地使用 var nodes = document.importNode(template.content, true) 标记模板.当然，在这种情况下，您不会获得嵌套模板复制优化(这可能重要也可能无关紧要)。

注意:

1. 我删除了 <content>来自 <x-inner> 的节点 模板，因为它没有任何用处。下面的代码摘取了 直接从 light-dom 中模板，并将实例标记到 影根。
2. 声明x-inner之前x-outer因为后者依赖于前者。

示例代码:

<x-outer></x-outer>

<polymer-element name="x-inner">
<template>
</template>
<script>

  Polymer({
    domReady: function() {
      this.renderTemplate();
    },
    renderTemplate: function() {

      // note: this only works if `template` is a true child of `this`
      // (as opposed to projected) 
      var template = this.querySelector('template');

      // use createInstance from TemplateBinding.js library API
      this.shadowRoot.appendChild(template.createInstance());

      /* 
      // this would work for raw templates, but Polymer includes TemplateBinding.js
      this.shadowRoot.appendChild(stampTemplate(template));
      */

      /* 
      // if you don't know whether TemplateBinding.js exists or not,
      // you could do something like this (see stampTemplate definition below)
      this.shadowRoot.appendChild(stampTemplate(template));
      */

      /*
      // this way uses the binding feature of TemplateBinding.js
      template.setAttribute('bind', '');
      template.model = { /* some data */ };
      */
    }
  });

  // use best available API
  function stampTemplate(template) {
    if (template.createInstance) {
      return template.createInstance();
    } else {
      return document.importNode(template.content, true);
    }
  }

</script>
</polymer-element>

<polymer-element name="x-outer" noscript>
<template>

  <x-inner>
    <template id="bar">Foo</template>
  </x-inner>

</template>
</polymer-element>

http://jsbin.com/nemaha/14/edit