kendo-template绑定中的row-template内的多行

Question

<script type="text/kendo-template" id="tableEditRows">
 <tr class="tableRow"  data-bind="source:cells" data-template="tableEditCell"></tr>
    <tr> 
        <td >testsal</td>
    </tr> 
  </script>
<script type="text/kendo-template" id="tableEditCell">
    <td class="tableCell" align="center">
        <p>value</p>
    </td>
</script> 
<div  id="numeric" ></div>
<script>
  var table = $('<table class="tableEdit"  style="width:200px">' +
                '<tbody align="center" data-bind="source:rows"  data-template="tableEditRows">');
                $("#numeric").append(table);
var viewModel = kendo.observable( {
  rows:[{
        cells:[{
                Id:1,
            Value:"asas"
      }]
  },{
        cells:[{
                Id:1,
            Value:"asas"
      }]
  }]
});

kendo.bind($("#numeric").get(0)，viewModel)；这里是我正在尝试做的链接http://dojo.telerik.com/ifoBA/3。有没有办法在row-template中实现多行？

Answer 1

我创建了一个html模板，在其中我对每个行使用了一个for循环，对于每个行，我在一个<tr>标记中调用了一个item-template。除此之外，我还有一个额外的行模板，用于说明additional details.below是一个代码片段，用于显示我所做的工作。

        <script type="text/html" id="testTemplate" > 
         #for(var i=0;i<rows.length;i++){#
           <tr class="tableRow" data-bind="source:rows[#=i#].cells" data-template='tableEditCell'></tr>
           #if(rows[i].index==0){#
            <tr  >
                <td class="tableCell" >
                       some value
                </td>
            </tr>
              #}#
            #}#
        </script>    

下面是模板的编译和追加

var table = $('<table class="elvi"><tbody  align="center"></tbody></table>');
    var template = kendo.template($("#testTemplate").html());
      var itemHtml = template(self.viewModel);
                table.append(itemHtml);
                table.appendTo($(self.element));