javascript – can one include `templates` in a html file similar to css?-ThrowExceptions

Exception or error:

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?

How to solve:

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


2020 Update

Now that HTML Imports have been deprectated, 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 )
} ()

###

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.

Leave a Reply

Your email address will not be published. Required fields are marked *