DOMPLATES
Library to handle <template>
elements. Html templates is a method supported by all modern browsers that is faster than any other template system because it works with parsed html elements instead strings. Here's more info
Note: It's not supported by explorer
- Fast
- Light (3Kb uncomprised)
- Compatible with CommonJS, AMD and global javascript
Install
Download the package using npm, yarn or bower:
npm install domplates
yarn install domplates
bower install domplates
Include the library in the html:
<script type="text/javascript" src="domplate/src/index.js"></script>
Or import the module using AMD/CommonJS:
var Domplates = require('domplates');
var tmpl = new Domplates();
How to use
To render a template, you only need the id
of the template and an object with the data to use. The keys in the object are css selectors and the value is the data used. For example:
<template id="tmpl-welcome">
<p>Hello, <strong></strong>!</p>
</template>
const welcome = tmpl.render('tmpl-welcome', {
strong: 'World'
});
//Insert the result in the dom
document.body.appendChild(welcome);
<p>Hello, <strong>World</strong>!</p>
The third argument specify whether the result must be inserted in the dom or not. Set true
to insert the result just before the <template>
element:
tmpl.render('tmpl-welcome', {
strong: 'World'
}, true);
<p>Hello, <strong>World</strong>!</p>
<template id="tmpl-welcome">
<p>Hello, <strong></strong>!</p>
</template>
Or pass a Node
instance that will work as the container:
const container = document.getElementById('container');
tmpl.render('tmpl-welcome', {
strong: 'World'
}, container);
(*) The container will be emptied before insert the new content.
Working with attributes
You can use an object instead a string to edit not only the content of the node but also its attributes. Example:
tmpl.render('tmpl-welcome', {
strong: {
html: 'World',
title: 'The title of the element'
}
}, true);
<p>Hello, <strong title="The title of the element">World</strong>!</p>
Repeat nodes
Use an array to create a new node for each value:
<template id="tmpl-list">
<ul>
<li></li>
</ul>
</template>
tmpl.render('tmpl-list', {
li: [
'Laura',
'Miguel',
'Guille'
]
}, true);
<ul>
<li>Laura</li>
<li>Miguel</li>
<li>Guille</li>
</ul>
And, of course, you can use an array of objects:
tmpl.render('tmpl-list', {
li: [
{
html: 'Laura',
class: 'is-girl'
},{
html: 'Miguel',
class: 'is-boy'
},{
html: 'Guille',
class: 'is-boy'
}
]
}, true);
<ul>
<li class="is-girl">Laura</li>
<li class="is-boy">Miguel</li>
<li class="is-boy">Guille</li>
</ul>
Empty nodes
Nodes with the values null
, undefined
or false
will be removed:
<template id="tmpl-hello">
<p>Hello <strong></strong></p>
</template>
tmpl.render('tmpl-hello', {
strong: null
}, true);
<p>Hello</p>
(*) Use empty string if you want to keep empty nodes.
Subtemplates
You can use also templates within templates:
<template id="tmpl-users">
<h1></h1>
<ul>
<template id="tmpl-user">
<li>
<a>
<strong></strong>
</a>
<p></p>
</li>
</template>
</ul>
</template>
tmpl.render('tmpl-users', {
h1: 'List of users',
'#tmpl-user': [
{
strong: 'Laura',
a: {href: 'http://laura.com'},
p: 'Web developer'
},{
strong: 'Miguel',
a: {href: 'http://miguel.com'},
p: 'UX designer'
},{
strong: 'Guille',
a: {href: 'http://guille.com'},
p: 'Dancing'
}
]
}, true);
<h1>List of users</h1>
<ul>
<li>
<a href="http://laura.com">
<strong>Laura</strong>
</a>
<p>Web developer</p>
</li>
<li>
<a href="http://miguel.com">
<strong>Miguel</strong>
</a>
<p>UX designer</p>
</li>
<li>
<a href="http://guille.com">
<strong>Guille</strong>
</a>
<p>Dancing</p>
</li>
</ul>
Functions
When the value of a node or attribute is a function, it will be evaluated. Note that the arguments passed to the function are the node element and the index.
<template id="tmpl-users">
<ul>
<li></li>
</ul>
<p>First paragraph</p>
<p>Second paragraph</p>
</template>
tmpl.render('tmpl-welcome', {
p: {
class: function (el, index) {
return 'position-' + index;
}
},
li: function () {
return [
'Laura',
'Miguel',
'Guille',
]
}
}, true);
<ul>
<li>Laura</li>
<li>Miguel</li>
<li>Guille</li>
</ul>
<p class="position-0">First paragraph</p>
<p class="position-1">Second paragraph</p>
Events
Any attribute starting with on
and a function as value will be considered an event:
<template id="tmpl-actions">
<div class="buttons">
<button class="button"></button>
</div>
</template>
tmpl.render('tmpl-actions', {
button: [
{
html: 'Click me!'
onclick: function (event) {
event.preventDefault();
alert('Button clicked!')
}
},
{
html: 'Other button!'
onclick: function (event) {
event.preventDefault();
alert('Other button clicked!')
}
}
]
}, true);
<div class="buttons">
<button class="button">Click me!</button>
<button class="button">Other button!</button>
</div>
Data
The attribute data
is used to save values in the dataset
property:
<template id="tmpl-actions">
<button class="button"></button>
</template>
tmpl.render('tmpl-actions', {
button: {
html: 'Click me!',
onclick: function (event) {
alert('Hello ' + this.dataset.name);
},
data: {
name: 'Miguel'
}
}
}, true);
<div class="buttons">
<button class="button">Click me!</button>
<button class="button">Other button!</button>
</div>