ClientTemplate001_JQueryTemplate

Benchmark created by Nguyen Trang Hong Bao on June 20, 2012

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
<script src="http://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.js"></script>


<script type="text/javascript">
    $(function() {
        $('body').delegate('#table .edit a, #table .select a', 'click', function() {
            var $td = $(this).closest('td');
            $td.find('input, select').show();
            $td.find('a').hide();
        });
        
        $('body').delegate('#table .edit .cancel, $table .select .cancel', 'click', function() {
            var $td = $(this).closest('td');
            $td.find('input, select').hide();
            $td.find('a').show();
        });     
    }); 
        
        function DummyFunction() {
                var prefix = "Hello";
                var suffix = "Wolrd!";
                var greeting = prefix + " " + suffix;
                alert(greeting);
        }
        
</script>

<script type="text/x-jquery-tmpl" id="jqueryTmpl">
  <tr>
        <td> 
                <td><input type="checkbox" value="${id}" /></td>
                <td>${name}</td>
                <td>${custName}</td>
                <td>${winlost}</td>
                <td>${turnover}</td>
                <td>${margin}</td>
                <td>${betcount}</td>
                <td><div class="ipViewLink" onclick="DummyFunction();">${ip}</div></td>
                <td>${hasData}</td>
                <td>${sporttypeId}</td>
                <td>${sporttypeName}</td>
                <td class="edit">
                        <a>Edit</a>
                        <input style="display:none;" type="hidden" value="Blah" />
                        <input class="cancel" type="button" value="cancel" />
                </td>
                <td class="select">
                        <a>Select</a>
                        <select style="display:none;">
                                <option>0</option>
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                                <option>6</option>
                                <option>7</option>
                                <option>8</option>
                                <option>9</option>
                                <option>10</option>
                        </select>
                        <input class="cancel" type="button" value="cancel" />
                </td>
                <td>More string</td>
                <td>More string</td>
        </tr>
</script>

<script>
  var data = [];
  var numberOfRow = 100;
  for (var i = 0; i < numberOfRow; i++) {
           var row = {
                        id: i,
                        name: 'punter' + i,
                        custName: 'andrew',
                        winlost: (i * 2.2).toFixed(2),
                        turnover: i,
                        margin: i + '%',
                        betcount: i,
                        ip: '127.127.127.127',
                        hasData: false,
                        sporttypeId: 1,
                        sporttypeName: 'Soccer'
           };  
           data.push(row);
  }
        
</script>

Setup

var numberOfRow = 100;

Test runner

var html1 = $("#jqueryTmpl").tmpl(data);

var html1 = $("#jqueryTmpl").tmpl(data);

Revisions

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

• Revision 1: published by Nguyen Trang Hong Bao on June 20, 2012