Question

我想将模板注入聚合物组件，如下所示：

<polymer-element name="foo-bar">
  <template>
    <content></content>
    <!-- content is expected to contain a template with id="layout"-->
    <template bind ref="layout">
      default content template
    </template>
  </template>
  <script src="index.js"></script>
</polymer-element>

组件的使用：

<foo-bar>
    <template id="layout">another content template</template>
</foo-bar>

遗憾的是，作为元素内容提供的模板由于某种原因未被接管。

使用

模拟所希望的行为时

<polymer-element name="foo-bar">
  <template>
    <template id="layout">
      custom content template
    </template>
    <template bind ref="layout">
      default content template
    </template>
  </template>
  <script src="index.js"></script>
</polymer-element>

引用的模板（id =＆＃34; layout＆＃34;）按预期使用。

感谢任何帮助:-)

Answer 1

<template ref="layout"> says使用模板＃layout作为我的内容。所以我希望你的影子dom中的模板能够使用light dom模板的内容。这就是您在http://jsbin.com/takipi/1/edit中看到的内容。

但是，如果您想使用渲染用户提供的灯光<template>，则必须使用template.createInstance()激活它。默认情况下，模板是惰性的。对于此用例，您也不需要<content>。这是为了渲染，在这种情况下，它没有任何意义。

以下示例还说明了如何进行设置。它还显示了如何在灯光{{}}中使用<template>绑定，并在创建实例时填充它们。

<div id="container"></div>

<template if="{{showDefault}}">
  default content template
</template>

attached: function() {
  var template = this.querySelector('template');
  if (template) {
      this.$.container.appendChild(
          template.createInstance({foo: 5}));
      this.showDefault = false;
    }
}

完整代码：

<script src="http://www.polymer-project.org/platform.js"></script>
<script src="http://www.polymer-project.org/polymer.js"></script>
  
<polymer-element name="foo-bar">
  <template>

    <div id="container"></div>

    <template if="{{showDefault}}">
      default content template
    </template>

  </template>
  <script>
    Polymer({
      showDefault: true,
      attached: function() {
        var template = this.querySelector('template');
        if (template) {
          // Allow Polymer expressions in the template's {{}}.
          if (!template.bindingDelegate) {
            template.bindingDelegate = this.element.syntax;
          }

          this.$.container.appendChild(
              template.createInstance({foo: 5}));
          
          this.showDefault = false;
        }
      }
    });
  </script>
</polymer-element>

<foo-bar>
  <template>
    <b>another</b> content template. Also supports data: {{foo}}
  </template>
</foo-bar>

如何通过提供<template>作为元素内容</template>将<template>注入聚合物组件中

1 个答案: