Skip to content
jQuery Templating Engine to enable .jqt script file processing.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


jQuery Templates

A jQuery templating engine that allows embedded javascript templates for easy client side UI processing.

see for real application usage examples.

To load all templates:

Usually this is done when the document is ready, for example:

$(document).ready(function() {

Templates are loaded in the DOM as <script/> tags and the rules are simple. Set the attribute to 'type="text/x-jquery-template"' and the title to what you would like to name the template. You will use the name to render the template later.

Let's consider a simple example of a template to generate a select box for entities:

<script type="text/x-jquery-template" title="entities">
    <option value="">[new]</option>
    <% $.each(self.entities, function(index, entity) { %>
    <option value="<%= entity.value %>"> <%= %> </option>
    <% }); %>

$.loadTemplates() 'compiles' the template with title 'entities' into the $.templates object and is directly accessable as $.templates.entites. Templates are compiled into JS functions that you can call passing in template 'local' data. For examle:

var html = $.templates.entites(
 [{value: 1, name: "foo"}, {value: 2, name: "bar" }]

After running this the 'html' variable will contain:

    <option value="">[new]</option>
    <option value="1"> foo </option>
    <option value="2"> bar </option>

Using jQuery this can be inserted directly into the DOM:




Helper methods may also be added to the templater, currently it comes with a 'partial' helper available. The 'partial()' helper allows us to call a named template from within another template.

partial("other-partial-title", ...local data...);

Something went wrong with that request. Please try again.