在html表中渲染剑道模板

Question

Is it possible in any way to render the table rows of a table with a kendo template?

Here's how it should look but it won't render the rows inside the table since a <table> doesn't allow a <span> or <script> tag inside it

 <table class="table-striped">
     <span data-template="myTable" data-bind="source: numbers"></span>
     <script id="myTable" type="text/x-kendo-template">
         <tr>
             <td>
                 <span data-bind="text:number"></span>
             </td>
         </tr>
     </script>
 </table>


 <script>
     var numbers = [{number:1},{number:2},{number:3}]
 </script>

Answer 1

You could do it like this:

   <table id="output" class="table table-striped"></table>


  var tablerows = '';
  var template = kendo.template("<tr><td><span>#: number #</span></td></tr>");
  var numbers = [{number:1},{number:2},{number:3}];
  for (var i=0; i<numbers.length; i++){
    tablerows += template(numbers[i]);
  }
  $("#output").empty().append(tablerows);

DEMO

You could also put the loop inside the template...

Answer 2

I was able to solve it by putting the <script> tag for the template outside the table and binding from the <table> by adding a <tbody> tag inside the table like this:

<table class="table-striped">
    <tbody data-template="myTable" data-bind="source: numbers"></tbody>
</table>

<script id="myTable" type="text/x-kendo-template">
    <tr>
        <td>
            <span data-bind="text:number"></span>
        </td>
    </tr>
</script>