Question

我正在使用Kendo UI和Knockout JS库并遇到一个奇怪的问题。我正在尝试在kendo窗口中显示kendo网格，但网格内的行会重复。这是一段代码：

JS：

$(document).ready(function () {
        var clients = { FilteredClients: [{ ClientName: '1', ClientCode: 'Value 1' }, { ClientName: '2', ClientCode: 'Value 2'}], Header: 'TEST' };
        var viewModel = ko.mapping.fromJS(clients);
        ko.applyBindings(viewModel);

        var showClientLookupWindow = function () {

            var window = $("#clientLookupWindow").data("kendoWindow");
            window.center();
            window.open();
        }

        $('#btnClientLookup').bind('click', showClientLookupWindow);
    });

HTML：

<div>
    <a id="btnClientLookup" href="#" class="k-button k-button-icontext k-grid-search"><span
            class="k-icon k-search"></span>Client Lookup</a>

    <span data-bind="text: Header"></span>
    <div id="clientLookupWindow" data-bind="kendoWindow: { isOpen: false, visible: false, width: '600px', height: '230px', modal: true, resizable: false, title: 'Client Lookup'}">
        <div id="gridClients" data-bind="kendoGrid: { data: FilteredClients, columns: [ { field: 'ClientName', title : 'Client Name' }, { field: 'ClientCode', title: 'Client Code' } ], scrollable: false, sortable: true, pageable: false }">
        </div>
    </div>
    <div id="gridClientsOutside" data-bind="kendoGrid: { data: FilteredClients, columns: [ { field: 'ClientName', title : 'Client Name' }, { field: 'ClientCode', title: 'Client Code' } ], scrollable: false, sortable: true, pageable: false }">
    </div>
</div>

在浏览器中运行它，我们看到gridClientsOutside中有2行，但是在单击btnClientLookup后，窗口会弹出gridClients，其中包含4行。有没有人遇到过这个问题或有解决方法？

提前致谢，的Ihor

Answer 1

快速浏览一下，看起来kendoWindow部分内的绑定会被绑定两次，这会导致问题。

绑定可以在异步模式下运行，这可能是在knockout-kendo库中设置kendoWindow的方式。

目前，你可以这样做：

<div id="clientLookupWindow" data-bind="kendoWindow: { async: true, isOpen: false, visible: false, width: '600px', height: '230px', modal: true, resizable: false, title: 'Client Lookup'}">

这会在async: true绑定选项中添加kendoWindow。否则，在调用applyBindings之前，您可以ko.bindingHandlers.kendoWindow.options.async = true;进行全局设置。

以下是一个示例：http://jsfiddle.net/rniemeyer/2MexC/

Kendo UI使用Knockout JS绑定在Kendo UI窗口内复制网格

1 个答案: