剑道 UI 动态详细信息模板 来自网格的列数组

Question

我正在尝试使用剑道UI网格基于列数组创建一个动态模板。

我能够创建模板，但无法获取值。

有了这个代码：detailCols[i].field，我只是得到字段的名称。这是有道理的。但是，如何获取字段的实际值呢？

而不是显示"

col3"（字段名称），我想显示值"val13"

谢谢

js小提琴：http://jsfiddle.net/9PPbS/4/

   <div id="grid">
</div>
    <script id="detail-template" type="text/x-kendo-template">
    Dynamic Template:
    <ul>
      # for (var i =0; i < detailCols.length; i++) {   #
        <li>#: detailCols[i].title #  | val:  #: detailCols[i].field # (need value not field name)</li>
   # } #
    </ul>
    What I would like to generate:
    <ul>
        <li>Column 3 | val:  #: col3 #</li>
        <li>Column 4 | val:  #: col4 #</li>
    </ul> 
</script>
<script>
var data = [ 
        {col1: "val11", col2: "val12", col3: "val13", col4: "val14"},
        {col1: "val21", col2: "val22", col3: "val23", col4: "val24"}]
var mainCols = [ 
            { field: "col1", title: "Column 1" },
            { field: "col2", title: "Column 2" }]
var detailCols = [ 
            { field: "col3", title: "Column 3" },
            { field: "col4", title: "Column 4" }]
var dataSource = new kendo.data.DataSource({data: data});

$("#grid").kendoGrid({
                    dataSource: dataSource,
                    columns: mainCols,
                    detailTemplate: kendo.template($("#detail-template").html())
                });
</script>

Answer 1

模板中的小改动;而不是：

#: detailCols[i].field #

使用这个：

#: data[detailCols[i].field] #

（演示）