2

RPNiemeyerのkendo-knockoutライブラリを使用して、ビューモデルをKendoUIグリッドにバインドしています。グリッドの変更イベントをサブスクライブして、対応するビューモデルアイテムを更新できるようにします。

observableArrayを次のようなオブジェクトにバインドしました。

{
  Address: "Street name"
  ClientNumber: 1337
  NamePartner: "Client name"
  Selected: false
}

ここで、対応する行が選択されたときにSelectedプロパティをtrueに設定したいと思います（KendoUIグリッドの変更イベント）。これを行うには、Knockoutjsカスタムバインディングハンドラーを使用する必要があると思います。

私はこのhttp://jsfiddle.net/D3rSk/155/を見つけました、それは一種の同じことをしています。唯一の問題は、この例ではコンソールにエラーが発生することです。また、observableArray内のプロパティにバインドしたいのに、別の'selectedItem'observableをバインドしています。

前もって感謝します。

4

1 に答える 1

5

やりたいことを完全にシームレスに行うことはできませんが、次のことができます。

  • changeイベントのハンドラーを追加します
  • グリッドのselectメソッドを使用して、選択した行要素を取得します
  • 行要素から、グリッドのdataItemメソッドを使用してデータ項目を取得します
  • このdataItemはクリーンなオブジェクトであるため、その一意のキー（この場合はClientNumber）を取得し、それを使用してobservableArray内の元のアイテムを検索します。

何かのようなもの：

<div id="grid" data-bind="kendoGrid: { data: items, sortable: true, selectable: true, change: updateSelected, columns: ['Address', 'ClientNumber', 'NamePartner'], widget: grid }"></div>

次のようなビューモデルのupdateSelectedメソッドを使用します。

updateSelected: function() {
    var grid = viewModel.grid(),
        row = grid.select(),
        clientNumber = grid.dataItem(row).ClientNumber,
        actualItem = ko.utils.arrayFirst(viewModel.items(), function(item) {
           return item.ClientNumber === clientNumber;
        });

    if (actualItem) {
        actualItem.Selected = true;

        if (viewModel.previouslySelected) {
            viewModel.previouslySelected.Selected = false;   
        }

        viewModel.previouslySelected = actualItem;
    }            

    return true;
}

サンプル： http： //jsfiddle.net/rniemeyer/7MXfj/

このロジックを、バインディングの横に追加されるカスタムバインディングに移動することを検討できますkendoGrid。

于 2013-03-27T12:45:47.167 に答える