2

ノックアウトと組み合わせた剣道 Web グリッドがあります。グリッドの最後の列には、行を削除するためのボタンが含まれています。しかしremoveItemメソッドのパラメータは

this.removeItem = function (item) {
        this.FilteredClients.remove(item);
    }.bind(this);

間違った値を取得します。

http://jsfiddle.net/zeQMT/93/を見てください

何が欠けていますか？

ところで。列のタイトルを自分で設定したいので、行テンプレートを使用したくありません。

4

1 に答える 1

3

行テンプレートを使用していない場合、この方法でバインドするのはシームレスではありません。セル内のボタンのクリックを処理し、その行に関連付けられているデータ項目を見つけて、ビュー モデル項目を見つける簡単な方法がいくつかあります。

たとえば、次のように列をバインドできます。

   columns: [
                { field: "id", title: "id"},
                { field: "name", title: "name"}, 
                { command:[{text: "x", click: removeItem}]}
            ]

次に、removeItem関数は次のような適切なビュー モデル アイテムを見つける必要があります。

this.removeItem = function(e) {
    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
    if (dataItem && dataItem.id) {
        self.items.remove(function(item) {
           return item.id === dataItem.id; 
        });
    }
};

サンプル: http://jsfiddle.net/rniemeyer/EpkPy/

ビュー モデルのコードをきれいに保ちたい場合 (その中のイベント/要素を参照しないようにする)、アイテムを見つけてビュー モデルを呼び出すハンドラーをアタッチできます。これは私の好みです。

何かのようなもの：

   columns: [
                { field: "id", title: "id"},
                { field: "name", title: "name"}, 
                { command:[{text: "x", className: "btnRemove" }]}
            ]

次に、次のように目立たないようにハンドラーをボタンにアタッチします。

$("#myGrid").on("click", ".btnRemove", function(e) {
    var widget = $("#selectedServices").data("kendoGrid");
    var dataItem = widget.dataItem($(e.currentTarget).closest("tr"));
    if (dataItem && dataItem.id) {
          vm.removeItem(dataItem.id);
    }
});

VMのremoveItemメソッドは、次のように ID を取得します。

this.removeItem = function(id) {
    self.items.remove(function(item) {
        return item.id === id; 
    });
};

http://jsfiddle.net/rniemeyer/AwX5N/

于 2013-04-10T14:28:17.210 に答える