can one include `templates` in a html file similar to css?
working with html templates . code-wise, it's difficult to keep the right set of templates with each html file.
is it possible to have a file of template(s), much like a file of css , that one includes in the head section of the html file?
for example, to supplement the style section in head , one can link to a stylesheet, eg,
<link rel="stylesheet" type="text/css" href="mystyle.css" >
my app uses several collections of templates . can they be handled similar to stylesheets, ie, linked to in a separate file, or does each template definition need to be directly part of the original html file?
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 in stuff.html cannot be found using document.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.
上一篇: 我怎样才能配置Mac终端有颜色ls输出？