实施例

Question

是否可以从其他文件导入模板？我能够导入javascript和样式表，但无法弄清楚如何导入html模板。

例如：

我在 templates.html

中定义了各种内容项模板

<template id="hello>Hello {{ li.name }}</template>
<template id="hey">Hey!</template>

然后，我想重新使用 list.html

中的模板

<link rel="import" href="templates.html">

<polymer-element name="list" attributes="type,data">

<template>

  <template repeat="{{ li in items_in_data }}">
     <template bind ref="hey"></template>
     <template bind ref="{{ type }}"></template>
  </template>

</template>


</polymer-element>

最后，在 app.html

中

<list data="items.json" type="hello"></list>

如果我将templates.html中的内容放入list.html，它可以正常工作。但是，使用<link rel="import">时似乎无法加载或引用。有什么想法吗？

Answer 1

部分解决方案：以下适用于Chrome但不适用于polyfill浏览器（例如firefox）。需要查看polyfill代码以了解如何处理已链接的文件中的链接。

问题是导入的内容未插入到文档中，而是可供使用。有关详细信息，请参阅HTML5 Rocks imports - using content。您可以在链接文件中找到所有模板，并将它们插入到聚合物元素的文档片段中：

var importDoc = document.currentScript.ownerDocument;
var link = importDoc.querySelector('.myimports');
var templates = link.import.querySelectorAll('template'); 
for (var i=0;i<templates.length;i++) {
  importDoc.head.appendChild(templates[i]);
}

实施例

演示templates.html

<template id="hello">Hello World!</template>
<template id="goodbye">See you tomorrow</template>

演示importTemplates-list.html

<link class="myimports" rel="import" href="demo-templates.html">

<polymer-element name="demo-importTemplates-list">
  <template>
    <template repeat="{{ li in data }}">
      <h1>{{li}}</h1>
      <template bind ref="hello"></template> -- <template bind ref="goodbye"></template>
    </template>
  </template>
  <script>
    Polymer({
      data: ['first','second','third']
    });

    // http://www.html5rocks.com/en/tutorials/webcomponents/imports/#usingcontent
    // http://www.html5rocks.com/en/tutorials/webcomponents/imports/#include-templates
    var importDoc = document.currentScript.ownerDocument;
    var link = importDoc.querySelector('.myimports');
    var templates = link.import.querySelectorAll('template');
    for (var i=0;i<templates.length;i++) {
      importDoc.head.appendChild(templates[i]);
    }
  </script>
</polymer-element>

的index.html

<html lang="en">
 <head>
  <script src="../../webcomponents/bower_components/webcomponentsjs/webcomponents.min.js"></script>
  <link rel="import" href="../../webcomponents/bower_components/polymer/polymer.html">
  <link rel="import" href="demo-importTemplates-list.html">
  <title>demo-importTemplates</title>
 </head>
 <body>
  <demo-importTemplates-list  type="hello"></demo-importTemplates-list>
 </body>
</html>

Polymer：从另一个文件导入和绑定模板

1 个答案:

实施例

演示templates.html

演示importTemplates-list.html

的index.html