Test case details

Preparation Code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script> <script src="https://raw.github.com/wycats/handlebars.js/1.0.0-rc.3/dist/handlebars.js"> </script> <script src="http://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.js"> </script> <script src="http://documentcloud.github.com/underscore/underscore.js"> </script> <script src="http://github.com/mhevery/mustache.js/raw/dot-notation/mustache.js"> </script> <script src="http://github.com/pvande/Milk/raw/master/dist/v1.2.0/milk.js"> </script> <script src="//raw.github.com/Shopify/batman/master/lib/dist/batman.min.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();     });   }); </script> <script type="text/x-jquery-tmpl" id="tmplRow">   < tr > < td > < input type = "checkbox"   value = "${id}" / > < /td>   <td>${firstName} ${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 > </script> <table id="batman_template">   <tr data-foreach-person="data">     <td>       <input type="checkbox" data-bind="person.id" />     </td>     <td data-bind="person.firstName | append ' ' | append person.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> </table> <script>   var data = [];   for (var i = 0; i < 100; i++) {     var row = {       id: i,       firstName: 'john',       lastName: 'doe'     };     data.push(row);   }   $.template("savedTmpl", document.getElementById("tmplRow").innerHTML);   var underscoreTmpl = "\     <%for(var i=0;i<rows.length;i++){%>\     <%var row=rows[i];%> \     <tr> \       <td> <input type = 'checkbox' value = '<%= row.id%>' /> </td>\       <td><%= row.firstname%> <%= row.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 ><%}%>";   var mustacheTmpl = "\     {{#rows}}\     <tr> \       <td> <input type = 'checkbox' value = '{{id}}' /> </td>\       <td>{{firstname}} {{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 >{{/rows}}";   var milkTmpl = "\     {{#rows}}\     <tr> \       <td> <input type = 'checkbox' value = '{{id}}' /> </td>\       <td>{{firstname}} {{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 >{{/rows}}" </script>

Test cases

Test #1

var html1 = $("#tmplRow").tmpl(data)

Test #2

var s = []; for (var i = 0; i < 100; i++) {   s.push('<tr>');   s.push('<td><input type="checkbox" value="');   s.push(data[i].id);   s.push('" /></td><td>');   s.push(data[i].firstName + ' ');   s.push(data[i].lastName);   s.push('</td>');   s.push('<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>');   s.push('</tr>'); } var html2 = s.join('');

Test #3

var html3 = $.tmpl("savedTmpl", data);

Test #4

var html4 = _.template(underscoreTmpl, {   rows: data });

Test #5

Mustache.to_html(mustacheTmpl, {   rows: data });

Test #6

Milk.render(milkTmpl, {   rows: data });

Test #7

// async test var source = $("#tmplRow").html(); var template = Handlebars.compile(source); var context = {   firstName: "Mr Test",   lastName: "Testermann" } var html = template(context);