2

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

jsfiddle 代码在这里

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

4

3 回答 3

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

于 2013-06-25T20:22:44.757 回答
0

我采用了另一种方法，其中行模板本身有两行，一行是实际数据，另一行是详细信息行。然后使用手风琴触发详细信息行的显示/隐藏。使用手风琴的引导程序......对我来说效果很好，尽管它是一种绕行的方式。顺便说一句，在内部这也是他们的做法，但是是动态的。

于 2013-06-26T09:32:11.603 回答
0

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

首先，将 detailTemplate 添加到 kendoGrid 的模板列表中。为此，打开 knockout-kendo.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 向 kendo-knockout 模板渲染器请求模板时，该模板又将其交给 kendo-knockout 模板渲染器，模板不会立即渲染，而是以占位符的形式呈现如下所示的 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]-->并用正确呈现的模板替换它。

于 2018-06-13T21:57:21.933 回答