Jade for jQuery is a lightweight jQuery plugin providing a friendly API for using the jade template engine.
- Simple API
- Adheres to jQuery plugin conventions
- Caches compiled templates for more better performance
Some simple examples of using Jade for jQuery are provided below. Please note that some example pages are
also provided in /examples.
Templates can be defined inline using script tags. Because of the non-standard type value, this code
will not be executed as javascript, and is instead available to use as template markup:
<script id='my-template' type='text/x-jade'>
h1 Hello #{name}!
</script>Rendering a template is as simple as $('#my-template').jade({ /* data */ });. This will return a jQuery
collection representing the rendered template, which can then be chained in regular jQuery fashion. In this
example, we simply append the result to the body element:
$('#my-template').jade({ name: 'World' }).appendTo('body');Jade for jQuery exposes the $.jade() method for times when inline template tags aren't desired. As shown below, this
method will compile the provided template and render it using the provided data.
var template = 'h1 Hello #{name}!',
data = { name: 'World' },
html = $.jade(template, data);
console.log(html); // '<h1>Hello World!</h1>'Please note that the code above will not actually cache the compiled template, though. If it is known ahead of time that a given template will be used repeatedly, a template name can be provided as well, which will be used as a cache key for the compiled template:
var template = 'h1 Hello #{name}!',
templateName = 'header-template',
data = { name: 'World' },
html = $.jade(templateName, template, data);
console.log(html); // '<h1>Hello World!</h1>'- A test suite
Copyright 2013, Jeremy Martin (http://github.com/jmar777)
Dual licensed under the MIT or GPL Version 2 licenses.