calebds / minlate-js

A miniature, logic-less templating function written in JavaScript.

minlate-js

A miniature, logic-less templating function written in JavaScript.

Usage

The minified source code for minlate-js is available in minlate.min.js. You may download and link to this file or include its contents in your own JavaScript application. The un-minified and commented source code is available in minlate.js.

Specify a template in HTML like this:

<div id="template1" class="minlate">
  <h3>{first} {last}</h3>
  <b>Email:</b> <span>{email}</span><br>
  <b>Phone:</b> <span>{phone}</span>
</div>

Once minlate-js has loaded, render a template by calling minlate(). For example:

minlate("template1", {
  first: "Jane",
  last: "Doe",
  email: "[email protected]",
  phone: "555-555-5555"
});

This will cause the rendered template to appear in-place:

<div id="template1">
  <h3>Jane Doe</h3>
  <b>Email:</b> <span>[email protected]</span><br>
  <b>Phone:</b> <span>555-555-5555</span>
</div>

Details

Calling the minlate function

``` minlate( id, map, [start, end]) ``` __id__ - A string ID of the template to be rendered
__map__ - A simple map of keys to string replacement values
__start__ - An optional single-character string to override the default start character "{"
__end__ - An optional single-character string to override the default end character "}"

returns The DOM node representing the rendered template, or null if no template is rendered

This function requires two parameters. The first is a string value representing the ID of a template node in the DOM. This node must have the class 'minlate'. The second parameter is a simple Object mapping keys to string values. The keys should correspond to places in the template markup specified with {key}, and map[key] is the replacement value. Minlate replaces all {keys} in the tempalate with values by specified by map, and returns the updated DOM node.

The third and fourth parameters are optional, and should be single character strings. If provided, these override the default start and end tokens for replacement values. The defaults are open and close curly braces, respectively.

Notes

- Templates are initially hidden, becoming visible once rendered. - If no ID is provided, the function returns null. - If a key in the template is absent from the map, it is replaced with the empty string. - This function may be called any number of times; the template will be updated in the DOM.

Demo

A working example of minlate-js is available at http://paislee.net/minlate/minlate-test.html.

License

Copyright © 2012 "Paislee" Caleb Sotelo
Dual licensed under the MIT and GPL licenses.
http://dev.paislee.net/about/license/