utemplate
v2.2.5
Published
Templates are supported by default in HTML5, this is a single lightweight script to prepare them for you.
Downloads
52
Maintainers
supportReadme
µtemplate
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
install
npm
npm i --save utemplate
git
git clone [email protected]:Announcement/utemplate.git
usage
head
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>body
This is where we're going to put it for all to see
<section id="messages">
</section>script
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');frequently asked questions
That's nice, but why is it useful?
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.
Where does my data come from?
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}
Why wouldn't I use Angular, Meteor, or something better
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.