Preparation code

<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 type="text/x-jquery-tmpl" id="jquery-template">
    <table>
        {{each rows}}
          <tr>
            <td><input type = "checkbox" value = "${$value.id}" /></td>
            <td>${$value.firstName} ${$value.lastName}</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>
           <td>More string</td>
           <td>More string</td>
           <td>More string</td>
           <td>More string</td>
        </tr>
    {{/each}}
   </table>
</script>
<script type="text/javascript">
    var rows = [];

    for (var i = 0; i < 100; i++) {
        var row = {
          id: i,
          firstName: 'john',
          lastName: 'doe'
        };

        rows.push(row);
      }
  var jqueryTemplate = $("#jquery-template").html();

  $.template("savedTmpl", jqueryTemplate);

</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

$.tmpl(jqueryTemplate, {rows: rows});

$.tmpl("savedTmpl", {rows: rows});

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

Compare results of other browsers

0 comments