剑道模板绑定中的行模板内的多行答案

【问题标题】：multiple line within row-template in kendo-template bindings剑道模板绑定中的行模板内的多行
【发布时间】：2017-02-24 10:27:50
【问题描述】：

我需要一个使用剑道绑定的表格结构，我有一个行模板和项目模板，因为我有红色的 telrik(kendo) 文档，其中说行模板中只允许一行。要求是我想要在 row-template 中有不止一行。但是一旦我添加了不止一行，它只会为第一行呈现。

<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。有没有办法在行模板中实现多行

【问题讨论】：

你看过这个例子吗？ demos.telerik.com/kendo-ui/grid/hierarchy 从您的问题看来，您想提供一个父 ==> 子网格解决方案。
我想创建一个包含表格列值的行，并在它们下方创建另一个包含附加信息的新 TR。我确实开始使用包含标签的 RowTemplate，但这会产生问题，只有第一行数据绑定到模板而不是第二行

标签： kendo-ui telerik

【解决方案1】：

我能够通过使用静态模板来解决这个问题，因为我有一组固定的行。我创建了一个 html 模板，在该模板中，我为每一行使用了一个 for 循环，对于每一行，我调用了一个 item-template在<tr> 标签内。除此之外，我还有一个额外的行模板来说明额外的细节。下面是一个代码 sn-p 来显示我做了什么。

        <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));

【讨论】：