jQuery Templating Engine to enable .jqt script file processing.
Switch branches/tags
Nothing to show
Clone or download
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 http://github.com/merblogger 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 %>"> <%= entity.name %> </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...);