jQote2 has been released. Please consider upgrading now!!! Click here for a quick summary of what’s new and what’s changed.

jQote allows you to operate on a single template as well as a collection of templates. Any template you call jQote upon will get converted using the data object you provide.

Note: Since objects are passed by reference you may easily alter the data object inside a template and have these changes carried over to the next iteration.

To make your life easier you may just as well pass an array of data objects to jQote to have your template(s) iterate over every data object provided, thus inducing n x m conversions.

$.jqote_tag(tag) : method

This may be used to change the default start- and ending tag character from % to anything you want to. Be aware that changing the tag’s char(s) this way every successive call to jQote expects the templates to be compliant to the newly set default.

Returns

void

Parameters

tag : String

$().jqote(data[, tag]) : function

Inside your templates you may use the this keyword to reference the data object’s properties. Additionally two counting variables i and j are defined (the former iterating over your templates, the latter iterating over your data objects).

You may use the optional second paramter to temporarily specify different start- and ending tag char(s). The change will overwrite the default tag char(s) just for the single call!

Returns

jQuery : object

Parameters

data : object | array of object

tag : String (optional)

Example

The infamous and obligatory “Hello World” …

Notice that this temporarily uses a different start- and ending tag char (the * star)!!!

<p id="greet"></p>

<script type="text/html" id="tmpl">
    <![CDATA[
    I said <strong><*= this.what *></strong> !!!
    ]]>
</script>

<script type="text/javascript">
    // let's do some jQote magic
    $('#tmpl').jQuote({what: 'Hello World'}, '*').appendTo($('#greet'));
</script>

Example

This example will list some names of european capitals …

<ul id="capitals"><ul>

<!-- let's define our city template -->
<script type="text/html" id="city_tmpl">
    <![CDATA[
    <li class="city">
        <%= this.name %>
        <% if ( this.info ) { %>
        <ul class="info">
            <% for ( key in this.info) %>
            <li><%= key + ': ' +  this.info[key] %></li>
            <% ; %>
        </ul>
        <% } %>
    </li>
    ]]>
</script>

<script type="text/javascript">
    var cities = [{
        name: 'Paris',
        info: { language: 'french', sight: 'tour Eiffel' }
    }, {
        name: 'Berlin',
        info: { language: 'german', sight: 'Brandenburger Tor' }
    }];

    // let's do some jQote magic
    $('#city_tmpl').jQuote(cities).appendTo($('#capitals'));
</script>

jQote2 has been released. Please consider upgrading now!!! Click here for a quick summary of what’s new and what’s changed.

jQote (pronounced like Star Trek’s Chakotey) is basically a rewrite of John Resig’s awesome JavaScript Micro-Templating utility. I took his code and ported it to jQuery, overhauled the parsing / conversion part and extended it’s functionality to minimize everyone’s coding efforts.

See the jQote API reference.

PLEASE NOTE:
Version 1.1.0 now gives you the possibility of changing the tag character to something else than <% and %>. Please referr to the jQote API reference to see how to do it.

So, let’s get started writing down a basic template:

<script type="text/html" id="template">
<![CDATA[
    <p class="greetings">
        Hello <%= this.name %>, how are you doing?
        May I offer you
        <% this.is_starving() ? %>
            some tasty peasant?
        <% : %>
            a refreshing Singha?
        <% ; %>
    </p>
]]>
</script>

This well-mannered code snippet – though it may not seem like much – shows some very special markup, namely <%= expression %> and <% statement %>, respectively (please notice the extra ‘=’ sign on the first one).

As you may have guessed already, the code in-between these tags is mere JavaScript. To simplify things you should use the <%= %> tag whenever you want to directly echo a variable’s value (you may as well call a function or use any other expression, as long as it returns a string).

Pretty self-explanatory so far, hu? But what’s with all that <script type="text/html"> and <![CDATA[ ... ]]> shmoo, you ask? Well let’s cite John Resig here:
“Embedding scripts in your page that have a unknown content-type (such is the case here – the browser doesn’t know how to execute a text/html script) are simply ignored by the browser – and by search engines and screenreaders. It’s a perfect cloaking device for sneaking templates into your page. [...]“

Good news, that is we will be able to put our template code right into our HMTL source files and it won’t show up anywhere but in the sources (btw. thanks to the usage of CDATA it’s perfectly valid markup).

Now for the final part of our little example we’ll need some basic scripting to induce the conversion:

<script type="text/javascript">
    var obj= {
        name: 'Jabberwocky',
        is_starving: function() {
            return Math.random() > 0.5;
        }
    };
    $('#template').jqote(obj).appendTo($('body'));
</script>

That’s it, there’s nothing more to it than calling jQote on our template and providing it with some data object to get things started. jQote really is fun to use and cuts down on the time spent trying to inject arbitrary data into your sites. You’ll learn to love it pretty fast, I promise! Give it a try.

One final word: I’d like to thank John Resig for bringing this up. You rock, dude.