THIS PROJECT IS DEPRECATED

JQuery now has an officially sanctioned templating engine: http://blog.jquery.com/2010/10/04/new-official-jquery-plugins-provide-templating-data-linking-and-globalization/

Development on this project has now ceased.

Tempest jQuery Templating Plugin

Copyright (c) 2009 Nick Fitzgerald - http://fitzgeraldnick.com/ - MIT licensed

Note: All releases are minified, to get the latest development version grab a clone from http://github.com/fitzgen/tempest/tree/master

HELLO WORLD

var template = "<p>Hello, {{ name }}!</p>";
$(document).tempest(template, {
    name: "World"
});

PHILOSOPHY

I was not satisfied with the other templating plugins available, so I wrote my own. This templating system is very simple and enforces the seperation of form and function, or HTML and JS. This provides a great abstraction layer so that you can write a template ad then promptly remove the mental overhead of rendering js objects to HTML.

Other templating languages just build and execute function blocks with strings. Any type of js logic you could want is included and evaluated. For some people, this may be the freedom that they want.

On the other hand, Tempest will only fill in values and iterate over arrays for you. This forces you to remove any programming logic from the templates and separate form from function. This type of templating philosophy can also be seen in the Django templating language.

The other big thing, for me, is that iteration is handled seamlessly. Just pass an array of objects to tempest instead of a single object and it will return a jquery element array.

MAILING LIST

To get involved, ask questions, or recieve help with Tempest, you can email the Tempest mailing list: tempest@librelist.com

API

Note: The API is for the most current release only, there may be slight differences in older releases.

Saving & retrieving templates to and from $.tempest

Setter:

$.tempest("post", "<li><a href='{{ url }}'>{{ title }}</a></li>");
// returns string: "<li><a href='{{ url }}'>{{ title }}</a></li>"

Getter:

$.tempest("post");
// returns string: "<li><a href='{{ url }}'>{{ title }}</a></li>"

$.tempest will also find all elements with the class "tempest-template" and save them with their "title" attribute as the key they are indexed by once the $(document).ready() event fires.

For example, assuming this is in the html when $(document).ready() fires:

<textarea title="new-post" class="tempest-template" style="display:none">
    <li class='new'><a href='{{ url }}'>{{ title }}</a></li>
</textarea>

Then you could access that template just as you would access any other template that you manually created:

$.tempest("new-post");
// returns string: "<li class='new'><a href='{{ url }}'>{{ title }}</a></li>"

The two typical elements people use as embedded templates are textareas and scripts with wacky types (for example <script type="text/template">, which won't be modified by browsers or attempted to be ran as JS). The reason these are typically used is that search engines don't index the content inside these two elements.

Note: $.tempest will remove the textarea from the DOM after storing the contents in the template cache.

Get all templates Tempest has stored by passing no arguments:

$.tempest();
// returns array of pairs: [
//                           ["post",
//                            "<li><a href='{{ url }}'>{{ title }}</a></li>"],
//                           ["new-post",
//                            "<li class='new'><a href='{{ url }}'>{{ title }}</a></li>"]
//                         ]

Rendering objects to templates

Render an object to an existing template:

$.tempest("post", {
    title: "My Blog",
    url: "http://fitzgeraldnick.com/weblog/",
});
// returns jQuery: [ <li><a href='http://fitzgeraldnick.com/weblog/'>My Blog</a></li> ]

Render an array of objects to an existing template

var arr = [{ title: "My Blog", url: "http://fitzgeraldnick.com/weblog/" },
           { title: "Google", url: "http://google.com/" },
           { title: "Hacker News", url: "http://news.ycombinator.com/" }];
$.tempest("post", arr);
// returns jQuery: [ <li>, <li>, <li> ]

Render an object (or array of objects) to a one-time-use template:

var one-time-template = "<span>{{ title }}: {{ content }}</span>";
$.tempest(one-time-template, {
    "title": "Example",
    "content": "Hello World!",
});
// returns jQuery: [ <span>Example: Hello World!</span> ]

Boolean Logic

Tempest implements very simple boolean logic. Just if's, no else's:

var template = "{% if is_active %}<p>This record is active.</p>{% endif %}";
$.tempest(template, {
    is_active: true
});
// returns jQuery: [ <p>This record is active.</p> ]

For Loops

Use this syntax:

<ul>
{% for person in people %}
   <li>{{ person }}</li>
{% endfor %}
</ul>

DOM Manipulation

Replace the inner html ($(selector).html()) of a DOM element.

$(selector).tempest(template, context);

You can use any jquery dom manipulation with tempest:

// $(selector).append($.tempest(template, context));
$(selector).tempest("append", template, context);

// $(selector).prepend($.tempest(template, context));
$(selector).tempest("prepend", template, context);

// Etc... This works with *all* jQuery methods.
$(selector).tempest("before", template, context);
$(selector).tempest("after", template, context);
$(selector).tempest("replaceWith", template, context);

Write your own template tags

All tags are stored in $.tempest.tags. Tags have a couple things to work with:

The "args" property is set before render:

{% tag_type arg1 arg2 foo bar %}

The "args" property would be set to

["arg1", "arg2", "foo", "bar"]

in this example. The tag's render method could look them up in the context object, or could do whatever it wanted to do with it.

A "subNodes" property which is an array of all the nodes between the start tag and it's corresponding {% end... %} tag. NOTE: This property is only set for a block if it has the "expectsEndTag" property set to true.

Every block tag should have a "render" method that takes one argument: a context object. It MUST return a string.

Here is an example tag that filters out profanity from the variables passed to it before printing them:

$.tempest.tags.filter = {
    expectsEndTag: false,
    render: function (context) {
        var rendered = [];
        for (var i = 0; i < this.args.length; i++) {
            rendered.push(
                $.tempest.getContextValue(this.args[i], context).replace(/shit/gi, "#!$%")
            );
        }
        return rendered.join(" ");
    }
};

var template = "<p>No profanity here: {% filter badWord %}</p>";
$.tempest(template, { badWord: "shit" });
// returns jQuery: [ <p>No profanity here: #!$%</p> ]

Since arguments are passed in as strings, if you want to get the context value assocciated with the argument "object.foo.bar", you must call $.tempest.getContextValue(arg, context).

For another reference, see the implementation of the if tag here: http://github.com/fitzgen/tempest/blob/master/jquery.tempest.js#L69

Misc.

Access an object's attributes with the dot notation:

var one-time-template = "<p>My name is <em>{{ me.full_name }}</em></p>";
$.tempest(one-time-template, {
    "me": {
        "full_name": "Nick Fitzgerald"
    }

});
// returns jQuery: [ <p>My name is <em>Nick Fitzgerald</em></p> ]