jQuery Template update() vs recreate

Benchmark created by Chi Chan on February 14, 2011

Description

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>

<script type="x-jquery-tmpl" id="tmplRow">
<tr>
    <td>
    {{if $data.DisplayFullName}}
        ${FullName}
    {{else}}
        ${FirstName} ${LastName}
    {{/if}}
    </td>
</tr>
</script>

<script type="x-jquery-tmpl" id="tmplTbody">
<tbody>
{{each Rows}}
    {{tmpl($value) '#tmplRow'}}
{{/each}}
</tbody>
</script>

<table id="table"></table>

<script>
$(function () {
    var data = {
        Rows: []
    };

    for (var i = 0; i < 100; i++) {

        var row = {
            FirstName: 'john',
            LastName: 'doe',
            FullName: 'This is a full name',
            DisplayFullName: i % 2 == 0
        }

        data.Rows.push(row);
    }

    $('#tmplTbody').tmpl(data).appendTo('#table');
});

function updateData($tmpl) {
    $tmpl.data.Rows[0].FirstName = "updated";
    $tmpl.data.Rows[0].LastName = "updated";
    $tmpl.data.Rows[0].FullName = "updated";
}
</script>

Test runner

var $tmplItem = $('#table tbody').tmplItem();
updateData($tmplItem);
$tmplItem.update();

var $tmplItem = $('#table tbody').tmplItem();
updateData($tmplItem);
var data = $tmplItem.data;

$('#table').empty();
$('#tmplTbody').tmpl(data).appendTo('#table');

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

• Revision 1: published by Chi Chan on February 14, 2011
• Revision 2: published by blackjid on November 16, 2011