1

KendoUIとKnockoutJSライブラリを使用していますが、奇妙な問題があります。剣道ウィンドウ内に剣道グリッドを表示しようとしていますが、グリッド内の行が重複しています。コードは次のとおりです。

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をクリックすると、4行で構成されるgridClientsがウィンドウに表示されます。誰かがこの問題に遭遇したか、これに対する回避策がありましたか？

よろしくお願いします、Ihor

4

1 に答える 1

1

一見すると、kendoWindowセクション内のバインディングが2回バインドされているように見えます。これが、問題の原因です。

バインディングは非同期モードで実行できます。これは、おそらく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バインディングオプションが追加されます。ko.bindingHandlers.kendoWindow.options.async = true;それ以外の場合は、 applyBindingsを呼び出す前に、グローバルに設定することができます。

サンプルは次のとおりです：http：//jsfiddle.net/rniemeyer/2MexC/

于 2012-05-31T17:44:52.530 に答える