Better jQuery templating
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Fuze is a lightweight javascript template engine designed to turn javascript objects into rendered html in a standard, intuitive, and simple way. Fuze does not use a proprietary template language, so there is nothing new to learn; if you are familiar with jQuery and the DOM, Fuze is cake.


Using Fuze is straightforward. Given the following HTML:

<div id="contactInfo">
    Name: <span class="firstName"></span> <span class="lastName"></span><br />
    Phone: <span class="phone"></phone>

    <div class="address">
        Address: <span class="street"></street><br />
        <span class="city"></city>, <span class="state"></span> <span class="zipcode"></span>

And the following javascript object:

var contact = {
    firstName:  'Bill',
    lastName:   'Jones',
    phone:  '555-1234',
    address: {
        street: '123 Fake Street',
        city:   'Salida',
        state:  'CO',
        zipcode: '81201'

We can inject the object into the html by running fuze() on the matched element.


Which produces this:

<div id="contactInfo">
    Name: <span class="firstName">Bill</span> <span class="lastName">Jones</span><br />
    Phone: <span class="phone">555-1234</phone>

    <div class="address">
        Address: <span class="street">123 Fake Street</street><br />
        <span class="city">Salida</city>, <span class="state">CO</span> <span class="zipcode">81201</span>