Template system

A dead simple and tiny template system. Stop repeating yourself. But why?

• You don't want to learn a full framework for doing a simple list but using a for still requires too much work and special cases
• Cannot generate the html in the back-end (like with cordova)
• It was fun to make it and it's fun to use it

Install it

Install it with bower:

bower install htemplate

Or just download template.min.js and include it in your page:

<script src="template.min.js"></script>

Small but complete example

To see other examples check out /examples in your browser. For a simple example, the html:

<div class="food"></div>

<template class="product">
  <article class="card">
    <header>
      <h2 class="title"></h2>
    </header>
    <img>
  </article>
</template>

Then the javascript:

// The list of products that you want to display
var products = ['apple', 'strawberry', 'pear', 'banana'];

// Use the library. What is the template, the products, and how they are related
template('template.product', products, function(product){

  // "this" refers to the current template
  this.querySelector('.title').innerHTML = product.name;
  this.querySelector('img').setAttribute('src', product.name + '.jpg');

// Tell it where to put it. It's lazy-loading
}).into('.food');

jQuery makes it slightly easier:

var products = ['apple', 'strawberry', 'pear', 'banana'];

template('template.product', products, function(product){
  // Remember to put "this" to make it target only the current template
  $('.title', this).html(product.name);
  $('img', this).attr('src', product.name + '.jpg');
}).into('.food');

Documentation

The main function is called template. You use it in this way:

template(selector, data, callback).into(selector);

It will return an instance of itself that should be used later on with either appendTo or into to push it to some section of the html. The arguments for template are:

selector

This is the template itself. It can be a css selector or an html element. Note that the final template will be what's inside this html element, excluding the element itself. Really useful for using the new html's template element. Examples:

// Using a simple css selector
template('.profile', {});

// Using an element
var tpl = document.querySelector('.profile');
template(tpl, {});

// Using a complex selector with jQuery:
var tpl = $('.profile:not(.inactive)').first();
template(tpl, {});

data

The data that will fill your templates. This can be an array or a single variable. If you put it empty nothing will be added, in case that you just want to clone an element you can use an empty string or object like this: '' or {}. Examples:

// Using a simple string:
template('.profile', "Peter");

// Using an array of names:
template('.profile', ["Peter", "Martha", "John"]);

// Using an array of objects:
var people = [
  { name: "Peter", birthday: "15/03" },
  { name: "Martha", birthday: "26/08"},
  { name: "Martha", birthday: "21/11"}
];
template('.profile', people);

callback

This defines the relationships between each of the elements from the data and the template. It is executed once per each of the data's array elements, once if data is a single element or never if data is null. It accepts 3 parameters, similarly to most of javascript's Array methods. The first one is the current element, second one current index and third one the whole data. It is highly relevant that this within this function will be the current template. But let's see it with few examples:

// Let's display their birthdays
var people = [
  { name: "Peter", birthday: "15/03" },
  { name: "Martha", birthday: "26/08"},
  { name: "Martha", birthday: "21/11"}
];
template('.profile', people, function(person){
  this.querySelector('.name').innerHTML = person.name;
  this.querySelector('.birthday').innerHTML = person.birthday;
  });

.into(selector)

Use it to indicate where to put the generated templates. It will overwrite anything already in there. The selector arguments behaves in the same way as the first argument of template()

// Refresh the current profiles
template(...).into('.profiles');

.appendTo(selector)

Use it to indicate where to put the generated templates. They will be appended to anything in there. The selector arguments behaves in the same way as the first argument of template()

// Add more profiles
template(...).appendTo('.profiles');

Testing

A super small, non-comprehensive test is available in test/index.html. Download the repository and access it from your browser.