1

我正在使用 Kendo UI 和 Knockout JS 库,但遇到了一个奇怪的问题。我试图在剑道窗口中显示剑道网格​​,但网格内的行会重复。这是一段代码:

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行。有没有人遇到过这个问题或有解决方法?

在此先感谢,

4

1 回答 1

1

快速浏览一下,该kendoWindow部分内的绑定似乎被绑定了两次,这导致了问题。

那里的绑定可以在异步模式下运行,这可能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: truekendoWindow绑定选项。否则,您可以ko.bindingHandlers.kendoWindow.options.async = true;在调用 applyBindings 之前对其进行全局设置。

这是一个示例:http: //jsfiddle.net/rniemeyer/2MexC/

于 2012-05-31T17:44:52.530 回答