Fatal编程技术网
  • polymer/
  • Polymer 聚合：从另一个文件导入和绑定模板

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

polymer

Polymer 聚合：从另一个文件导入和绑定模板,polymer,Polymer,是否可以从另一个文件导入模板？我能够导入javascript和样式表，但不知道如何导入html模板 例如： 我在templates.html中定义了各种内容项模板 <template id="hello>Hello {{ li.name }}</template> <template id="hey">Hey!</template> <link rel="import" href="templates.html"> <poly

是否可以从另一个文件导入模板？我能够导入javascript和样式表，但不知道如何导入html模板

例如：

我在templates.html中定义了各种内容项模板

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

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

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

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

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


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]);
}



var importDoc=document.currentScript.ownerDocument；
var link=importDoc.querySelector（'.myimports'）；
var templates=link.import.querySelectorAll（'template'）；
对于（var i=0；i

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



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



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