Getting Start HTML's Template

October 28, 2014

Reading time ~1 minute

Outline

We’ve used html template when we develop web app by using some tricks.

But now we can use template function safely and conveniently if you use new Template.

Capability

can i use : http://caniuse.com/#feat=template

At the moment (2014/10/27) we can not use it only IE. In all of modern browser we can use it.

Benefit

  • The markup is hidden and dose not rendered until activated.
  • Request to get any resources dose not work until activated.
  • You can not get inner contents of template element.
  • You can put template element in head, body, and frameset.

Usage

If you have following template you can use it with 2 ways below.

<template id="mytemplate">
	<div class="comment">this is new contents generated from template element.</div>
</template>

<section id="host"></section>

basic

var t = document.querySelector('#mytemplate');
var host = document.querySelector('#host');
var clone = document.importNode(t.content, true);

host.appendChild(clone);

with shadow dom

var t = document.querySelector('#mytemplate');
var host = document.querySelector('#host-target').createShadowRoot();
var clone = document.importNode(t.content, true);

host.appendChild(clone);

Reference

add ticket number to git commit automatically

Most of ticket tracker like Github, pivotal tracker have function to connect your commit to ticket(story).But every time when you commit ...… Continue reading

I will build frontend and backend separately

Published on September 28, 2016

order of angular controller's initialisation

Published on October 05, 2015