Question

Kendo UI支持使用detailTemplate，但如何通过Knockout-kendo绑定使用它？

jsfiddle代码为here

只是添加rowTemplate和detailTemplate不起作用，rowTemplate显示但是当我打开详细信息时，我会得到各种异常（ASP.NET和jsfiddle中断的对象）

Answer 1

这是我提出的（基于你的解释）。我知道你已经做了一个解决方法，但这里有一个答案，所以这个问题至少可以得到一个答案，万一其他人遇到这个问题。

查看

<div data-bind="kendoGrid: { data: items, columns: columns, pageable: { pageSize: 3 }, scrollable: false, rowTemplate: 'rowTmpl', useKOTemplates: true }"> </div> <script id="rowTmpl" type="text/html"> <tr> <td data-bind="click: $parent.toggleShowDetails">+</td> <td data-bind="text: id"></td> <td data-bind="text: name"></td> </tr> <tr data-bind="visible: showDetails"> <td colspan="3"> <div data-bind="kendoGrid: { data: $data.details, scrollable: false }"></div> </td> </tr> </script>

<强>视图模型

var ViewModel = function () { var self = this; self.columns = [{ field: ' ' }, { field: 'id' }, { field: 'name'}]; self.items = ko.observableArray([ { id: "1", name: "apple", details: [{ id: "1", name: "subApple"}], showDetails: ko.observable(false) }, { id: "2", name: "orange", details: [{ id: "2", name: "subOrange"}], showDetails: ko.observable(false) }, { id: "3", name: "banana", details: [{ id: "3", name: "subBanana"}], showDetails: ko.observable(false) }, { id: "4", name: "pineapple", details: [{ id: "4", name: "subPineapple"}], showDetails: ko.observable(false) }, { id: "5", name: "grape", details: [{ id: "5", name: "subGrape"}], showDetails: ko.observable(false) }, { id: "6", name: "mango", details: [{ id: "6", name: "subMango"}], showDetails: ko.observable(false) } ]); self.toggleShowDetails = function (data, event) { data.showDetails(!data.showDetails()); }; }; ko.applyBindings(new ViewModel());

链接到GitHub发表评论：https://github.com/kendo-labs/knockout-kendo/issues/75#issuecomment-20004008

Answer 2

我遵循了一种不同的方法，其中行模板本身有两行，一行是实际数据，另一行是详细行。然后使用手风琴来触发细节行的显示/隐藏。用过手风琴的手风琴......对我来说效果很好，虽然它的方式很圆。顺便说一句，这是他们如何做到这一点，但动态。

Answer 3

理想情况下，这可以通过对kendo-knockout的拉取请求来修复。取而代之的是，您可以通过以下方式获取挖掘数据以在kendo网格详细信息模板中正确绑定和渲染：

首先，将detailTemplate添加到kendoGrid的模板列表中。为此，请打开knockout-kendo.js，搜索＆＃39; kendoGrid＆＃39;，然后添加＆＃34; detailTemplate＆＃34;到模板名称数组。在你改变后它应该是这样的：

createBinding({
    name: "kendoGrid",
    defaultOption: DATA,
    watch: {
        data: function(value, options) {
            ko.kendo.setDataSource(this, value, options);
        }
    },
    templates: ["rowTemplate", "altRowTemplate", "detailTemplate"]
});

其次，除了为绑定定义了detailTemplate之外，还要添加一个与viewmodel上的方法绑定的detailInit绑定。这是一个示例绑定：

<div data-bind="kendoGrid: { data: items, detailTemplate: 'myKoTemplate',
    useKOTemplates: true, detailInit: myDetailInit } "> </div>

第三，将以下detailInit方法添加到viewmodel中，以便绑定可以找到它：

this.myDetailInit = function(e) {
  // Manually fire the databound event on the grid to 
  // get the detail template to unmemoize properly
  e.sender.options.dataBound();
}

这是一支笔，上面有一个工作示例：https://codepen.io/codethug/pen/MXoqZy

还在看吗？大。那么这里发生了什么，为什么这首先被打破了？

第一部分很简单。 detailTemplate并未作为kendoGrid的模板列出。添加它使得kendo knockout渲染模板。但是，模板会被记忆，但它永远不会被取消默认。

在这种情况下，Memoization意味着当kendo从kendo-knockout模板渲染器请求模板时，该渲染器又将其移交给挖空模板渲染器，模板不会立即渲染，而是在占位符中HTML注释的形式如下所示：插入DOM而不是呈现的模板。

Knockout-Kendo假设在渲染模板之后，将在kendo网格小部件上触发dataBound事件。 Knockout-kendo将这个事件挂钩到他们的unmemoize模板。对于像rowTemplate这样的模板的使用，这个假设是正确的。设置窗口小部件时，Kendo调用render方法，然后kendo调用dataBound方法。

然而，使用detailTemplate，假设不正确。单击某些内容以展开kendo网格行上的详细信息时，将调用renderTemplate方法，但不会触发dataBound事件，可能是因为数据没有更改。

我们可以通过手动触发dataBound事件来解决这个问题，如上面的代码所示。实际上没有任何数据发生过变化，但是触发该事件会触发kendo敲除以取消对HTML评论的取消，并将其替换为正确呈现的模板。

如何在淘汰剑道中使用detailTemplate？

3 个答案: