Currently available on github and npm
Templates are supported by default in HTML5, this is a single lightweight script to prepare them for you.
- Create your template, it won't be rendered
- Decide where it belongs
- Prepare the template with some data
- Insert the prepared template into the DOM
npm i --save utemplate
git clone [email protected]:Announcement/utemplate.git
It doesn't have to be in the head, put it wherever you want, just make sure it's loaded before the script is run.
We chose this location because if you don't have a <head> and <body> tags, most parsers throw the <template> in there by default.
<template id="message">
<article>
<h2>{title}</h2>
<p>{message}</p>
</article>
</template>This is where we're going to put it for all to see
<section id="messages">
</section>First, let's generate a new Template from our previously defined element.
Note that this can use the following provided by Alchemist
- querySelector
- jQuery node
- HTMLElement
template = new Template("#message");Next, we need to provide some data.
template.pipe({
title: 'Hello, world!',
message: 'How are you today?'
});And decide what to do with it.
// attach it to the DOM (now via a querySelector)
template.pipe('#messages');In the real world, data is going to be from a source. My environment has a couchdb document, but yours can be whatever you want it to be
- avoid writing html inside of javascript
- don't
document.createElementordocument.createTextNodeby hand - no more writing stringified json to the document.
The properties directly correspond to the text inside of the template and are automatically filled with those keys.
As of version [email protected] they can be multiple levels deep such as {a: {b: {c: 'd'}}} and the template requests {a.b.c}
If you enjoy reading and learning new things, then those will probably better for you. But if you want something small, fast and want it to just work, then microTemplates are for you.
Ours is very small and easy to learn, so if you're a beginner (or a minimalist like myself), then you should definately start here.