• Official jQuery Templating Plugin

    Oct 11 2010

    jQuery announced that they are now officially supporting jQuery Templates, thanks in big part to Microsoft.

    Templating cleans up the job of generating HTML with jQuery. It also gives you the opportunity of keeping HTML code out of your JavaScript completely, if you wish.

    Let's say you have a block of data like this:

    var fruits = [
        { name: 'apples', color: 'green' },
        { name: 'oranges', color: 'orange' },
        { name: 'bananas', color: 'yellow' },
        { name: 'tomatoes', color: 'red' }
    ];
    

    You want to display the data in a nice table with some color effects:

    namecolor
    apples green
    oranges orange
    bananas yellow
    tomatoes red

    Without templates, your code might look like this:

    // create a table
    var $table = $('<table class="fruit-table">');
    
    // append a header to the table
    $('<tr><th>name</th><th>color</th></tr>').appendTo( $table );
    
    // append a row for each fruit
    for (var i in fruits) {
        // create a row, and set the background to the color of the fruit
        var $row = $('<tr/>', { css: { background: fruits[i].color } });
    
        // create a column and append to the row
        // we use text here so all HTML is escaped, to prevent hacking
        $('<td/>', { text: fruits[i].name }).appendTo( $row );
    
        // do the same for the color
        $('<td/>', { text: fruits[i].color }).appendTo( $row );
    
        // append the row to the table
        $row.appendTo( $table );
    }
    
    // all done, stick the table on the page
    $table.appendTo('body');
    

    Unfortunately, code like this usually ends up looking kludgy, and it's often hard to visualize what the final HTML will look like.

    Templates let us turn the HTML/JavaScript relationship inside-out by putting the looping right in the HTML:

    // define a template for the fruit table
    // we'll use slashes at the end of each line to escape the line break
    // this way we don't have to concatenate strings.
    $.template('fruit-table', '\
        <table class="fruit-table"> \
            <tr><th>name</th><th>color</th></tr> \
            {{each rows}} \
                <tr style="background: ${color}"> \
                    <td>${name}</td> \
                    <td>${color}</td> \
                </tr> \
            {{/each}} \
        </table> \
    ');
    
    // instantiate the template with the fruit array passed in as 'rows'
    var $table = $.tmpl('fruit-table', { rows: fruits });
    
    // that's it. stick it on the page.
    $table.appendTo('body');
    

    Now there's no question what the HTML will look like. It's in plain view.

    If you'd like to jump on the chance to take the HTML out of your JavaScript completely, you can stick the same block on the page, in a special <script> block:

    <script id="fruit-table" type="text/x-jquery-tmpl">
    
        <table class="fruit-table">
            <tr><th>name</th><th>color</th></tr>
            {{each rows}}
                <tr style="background: ${color}">
                    <td>${name}</td>
                    <td>${color}</td>
                </tr>
            {{/each}}
        </table>
    
    </script>
    

    Now we're down to a single line of code. Beautiful, isn't it?

    $('#fruit-table').tmpl({ rows: fruits }).appendTo('body');
    

    Now that we've gotten that taken care of, let's take it to the next level, and make a template that will dump any tabular data we give it:

    <script id="table" type="text/x-jquery-tmpl">
    
    {{if !data || data.length == 0 }}
        <p>No data.</p>
    {{else}}
        <table class="${className}">
            <tr>
                {{each(key) data[0]}}
                   <th>${key}</th>
                {{/each}}
            </tr>
            {{each(i, row) data}}
                <tr>
                    {{each(key, value) row}}
                        <td>${value}</td>
                    {{/each}}
                </tr>
            {{/each}}
        </table>
    {{/if}}
    
    </script>
    

    $('#table').tmpl({
        data: fruits,
        className: 'fruits-table'
    }).appendTo('body');
    

    Want more? Check out the documentation and official announcements for lots more information:

  • Comments

    1. Zach Leatherman at 2:09pm on October 12, 2010

    Hey Jesse, great to see you blogging again.

    Any idea/documentation on the performance overhead of using templates over standard jQuery templates, innerHTML, or raw DOM?

    2. Jesse Skinner at 2:15pm on October 12, 2010

    @Zack - I'm glad to be back too :)

    Good question. I haven't done any performance profiling yet, but I do know that the Templates plugin will cache templates as a "compiled" function which will speed up reuse of that template. Whether that speed-up is faster than regular innerHTML or DOM isn't clear but definitely worth experimenting with.

    3. Jesse Skinner at 2:25pm on October 12, 2010

    @Zach - I just tried with the examples above, comparing the regular jQuery DOM scripting to using the jQuery template (second example), and compared to re-using the template again after it has been cached. I found the following:

    jQuery DOM: 4.5ms
    jQuery Template Definition and Use: 2ms
    jQuery Template Reuse: 1.4ms

    So it seems using the template is considerably faster than jQuery DOM even before the template is cached.

    I didn't compare to constructing the innerHTML yourself or doing non-jQuery DOM scripting, so I'm not sure how those compare. If you construct the HTML yourself, make sure you are escaping HTML in the data for a fair comparison.

    I hope this helps. Try experimenting and let us know if you discover anything.

    4. SEO services at 4:14am on January 27, 2011

    But what is the reason to keep the HTML codes out? What is the need to avoid it?

    5. Barrett at 8:35pm on May 8, 2011

    Thanks very much

    6. yangbb at 10:02pm on June 26, 2011

    http://jsperf.com/jquery-template-table-performance

    7. heredress at 8:45am on August 25, 2011

    <a href="http://www.tidebuy.com/">Online shopping</a>

    Commenting is now closed. Come find me on Twitter.