Menu
Would it be possible to import templates from another file? I'm able to import javascript and stylesheet, but cannot figure out how to import html templates.
For example:
I defined various content-item templates in templates.html
<template id="hello>Hello {{ li.name }}</template>
<template id="hey">Hey!</template>
And then, I would like to re-use the templates in 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>
Finally, in app.html
<list data="items.json" type="hello"></list>
If I put the contents inside templates.html into list.html, it works fine. However, it does not seem to load or reference when using <link rel="import">. Any ideas?
602
Partial solution: The below works in chrome but not polyfill browsers (e.g. firefox). Need to look through polyfill code to figure out how to handle links in a file already linked.
The issue is that the content of the import is not inserted into the document but is just made available for use. See HTML5 Rocks imports - using content for more details. You can find all of the templates in the linked file and insert them into your polymer element's document fragment:
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]);
}
<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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
