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>