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

Question

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

jsfiddle代码是here

只是添加rowTemplate和detailTemplate不起作用，rowTemplate出现了，但当我打开详细信息时，我得到了各种各样的异常( ASP.NET和jsfiddle中断中应该是对象)

Answer 1

我采用了一种不同的方法，在行模板中有两行，一行是实际数据，另一行是详细信息行。然后使用accordion触发显示/隐藏详细信息行。手风琴用的bootstrap ...对我来说工作得很好，尽管这是一种不同的方式。顺便说一句，他们在内部也是这样做的，但是动态的。

Answer 2

这是我想出来的(基于你的解释)。我知道你已经做了一个变通方法，但这里有一个答案，所以这个问题至少可以有一个答案，以防其他人遇到这个问题。

视图

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

ViewModel

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 3

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

首先，将detailTemplate添加到kendoGrid的模板列表中。为此，打开knockout-kdo.js，搜索“kendoGrid”，然后将"detailTemplate“添加到模板名称数组中。更改后的代码应该如下所示：

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

其次，除了为绑定定义一个detailTemplate之外，还需要添加一个绑定到视图模型上的方法的detailInit绑定。下面是一个绑定示例：

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

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

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模板呈现器请求模板时，kendo将模板交给敲出模板呈现器，该模板不会立即呈现，而是一个HTML注释形式的占位符，如下所示：<!--[ko_memo:123abc]-->被插入到DOM中，而不是呈现的模板中。

Knockout kendo假设在呈现模板之后，将在kendo网格小部件上触发dataBound事件。Knockout-kendo连接到该事件以取消对模板的记忆。对于像rowTemplate这样的模板的使用，这个假设是正确的。在设置小部件时，Kendo调用render方法，然后kendo调用dataBound方法。

然而，对于detailTemplate，这个假设是不正确的。当您单击某物以展开剑道网格行上的详细信息时，将调用renderTemplate方法，但不会触发dataBound事件，这可能是因为数据没有更改。

我们可以通过手动触发dataBound事件来解决这个问题，如上面的代码所示。实际上并没有更改任何数据，但是触发该事件将触发kendo淘汰赛，取消HTML注释<!--[ko_memo:123abc]-->的内存并将其替换为正确呈现的模板。