Kendo UI：使用 MVVM（数据属性）使用分层数据网格时如何绑定网格/详细信息模板答案

【问题标题】：Kendo UI: How to bind Grid/Detail template when using hierarchical datagrid using MVVM (data-attribute)Kendo UI：使用 MVVM（数据属性）使用分层数据网格时如何绑定网格/详细信息模板
【发布时间】：2017-07-12 06:14:41
【问题描述】：

我正在使用 Kendo UI 构建分层数据网格，并且我正在使用 MVVM 方法进行小部件绑定。

Here is the DEMO 我想要制作的那种分层网格。但是这里的例子使用的是 jQuery 而不是 MVVM。

如何使用 MVVM 使用数据属性为详细信息行绑定 detail template？

我尝试使用以下代码绑定detailTemplate，但它不起作用：

JS：

var viewModel = kendo.observable({
    ......
    ..........
    gridDetailTemplate: "<div>Name: #: name #</div><div>Age: #: age #</div>",
    ..........
    ......
});

HTML（剑道模板）：

<!-- Datagrid -->
<div data-role="grid" 
    data-columns="[
        {'field':'FullName', 'title':'Full Name'},
        {'field':'Gender', 'title':'Gender'},
        {'field':'Email', 'title':'Email'},
        {'field':'HomeTel', 'title':'HomeTel'},
        {'field':'Mobile', 'title':'MobileTel'},
    ]" 
    data-bind ="source: viewModel.datasource" 
    data-detail-init="viewModel.getGridRowDetailData"
    data-pageable='{
                    refresh: false,
                    pageSizes: true,
                    buttonCount: 5,
                }'
    data-navigatable = "true"
    data-resizable = "true"
    data-no-records= "true"
    data-messages = '{
        noRecords: "There is no data to be displayed"
    }'
    data-detail-template="viewModel.gridDetailTemplate"
    >
</div>

【问题讨论】：

标签： data-binding kendo-ui kendo-grid kendo-mvvm kendo-template

【解决方案1】：

最后，我是这样完成的：

我从 viewModel 中删除了 detailTemplate 并在视图文件中创建了一个模板部分，并使用 data-detail-template="data_grid_row_detail_template" 将其与模板 ID 绑定

这是我的最终代码：

JS：

var viewModel = kendo.observable({
    ......
    ..........
    //no need of the below line here
    //gridDetailTemplate: "<div>Name: #: name #</div><div>Age: #: age #</div>",
    ..........
    ......
});

HTML（剑道模板）：

<!-- Datagrid -->
<div data-role="grid" 
    data-columns="[
        {'field':'FullName', 'title':'Full Name'},
        {'field':'Gender', 'title':'Gender'},
        {'field':'Email', 'title':'Email'},
        {'field':'HomeTel', 'title':'HomeTel'},
        {'field':'Mobile', 'title':'MobileTel'},
    ]" 
    data-bind ="source: viewModel.datasource" 
    data-detail-init="viewModel.getGridRowDetailData"
    data-pageable='{
                    refresh: false,
                    pageSizes: true,
                    buttonCount: 5,
                }'
    data-navigatable = "true"
    data-resizable = "true"
    data-no-records= "true"
    data-messages = '{
        noRecords: "There is no data to be displayed"
    }'
    data-detail-template="data_grid_row_detail_template"
    >
</div>

<!-- Detail template -->
<script type="text/x-kendo-template" id="data_grid_row_detail_template">
    <div>Name: #: name #</div><div>Age: #: age #</div>
</script>

【讨论】：