I am working with HTML <template> elements. Code-wise, it seems inconvenient to keep the correct set of templates inside each HTML file.
Is it possible to put templates in a separate file? I want something like CSS, where I can include CSS files in the <head> section of my HTML file:
<link rel="stylesheet" type="text/css" href="mystyle.css">
My app uses several <template> collections. Can they be in a separate file, or does each <template> definition need to be directly part of the original HTML file?
I am working with HTML <template> elements. Code-wise, it seems inconvenient to keep the correct set of templates inside each HTML file.
Is it possible to put templates in a separate file? I want something like CSS, where I can include CSS files in the <head> section of my HTML file:
<link rel="stylesheet" type="text/css" href="mystyle.css">
My app uses several <template> collections. Can they be in a separate file, or does each <template> definition need to be directly part of the original HTML file?
- 1 Can you please add more information - I don't really understand the question. – Marty Commented Nov 17, 2015 at 4:37
- you can look into jade or javascript frameworks that allow templating - angularjs, for example. react and emberjs are also popular, and i believe they support templating as well. – rcheuk Commented Nov 17, 2015 at 4:44
- @Marty - I think this is clearer – cc young Commented Nov 17, 2015 at 4:44
- 1 @harmlessdragon - I think html5 templates are well supported. see developer.mozilla.org/en-US/docs/Web/HTML/Element/template and caniuse.com/#feat=template. for me, angular is a nightmare. attempting now to my own react-inspired controller/component/store using templates and web services – cc young Commented Nov 17, 2015 at 4:46
- @ccyoung once I saw an answer come in, I knew I would learn something. :) Thanks. – rcheuk Commented Nov 17, 2015 at 13:17
3 Answers
Reset to default 132020 Update
Now that HTML Imports have been deprecated, you could use fetch() to download HTML code:
void async function () {
//get the imported document in templates:
var templates = document.createElement( 'template' )
templates.innerHTML = await ( await fetch( 'templates.html' ) ).text()
//fetch template2 1 and 2:
var template1 = templates.content.querySelector( '#t1' )
var template2 = templates.content.querySelector( '#t2' )
console.log( template2 )
} ()
Original answer
Imagine we want to import a bunch of <template>s in a separate file called templates.html.
In the (main) homepage index.html, we can import the file via HTML Imports:
<link rel="import" href="templates.html" id="templates">
In the imported file templates.html, add one or as many templates as you need:
<template id="t1">
<div>content for template 1</div>
</template>
<template id="t2">
content for template 2
</template>
The imported document is available from the import property of the <link> element. You can use querySelector on it.
<script>
//get the imported document in doc:
var link = document.querySelector( 'link#templates' )
var doc = link.import
//fetch template2 1 and 2:
var template1 = doc.querySelector( '#t1' )
var template2 = doc.querySelector( '#t2' )
</script>
Note: you can place the above script in the main document, or in the imported one because the <script>s inside an imported file are executed as soon as the are parsed (at download time).
http://www.html5rocks.com/en/tutorials/webcomponents/imports/
You need HTML 5 though
<head>
<link rel="import" href="/path/to/imports/stuff.html">
</head>
Unfortunately,
<head> <link rel="import" href="/path/to/imports/stuff.html"> </head>
does not work.
The entire stuff.html is stuck in there as html as part of head, and for all practicable purposes inaccessible.
In other words, a template defined instuff.htmlcannot be found usingdocument.querySelector()`, and is therefore unavailable to the script.
fwiw, I don't really understand any advantages of import the way it works now - for it to be any good it needs to strip off (rather than adding) all the outer html before it appends the contents to head - not its current action.