knockout.js - KnockOut KoGrid : koGrid で行のダブルクリックとリンクを使用するにはどうすればよいですか?

Question

アップデート：

koGrid で列の値をリンクとして使用する方法と、同時に kogrid でダブルクリック機能を使用するにはどうすればよいかを確認して提案してください。任意の行をクリックすると、ホーム/インデックス ページに移動します。

[こちら] : http://jsfiddle.net/LRY2U/

 {
field: "age", 
displayName: "Age",
cellTemplate: "content"
 }

ありがとうプリヤンカ

Answer 1

問題は、行選択がマウス クリックを処理することです。そのため、クリック イベントが行選択ハンドラーに伝達されないようにする必要があります。これは、メソッドを使用して行うことができますevent.stopPropagation。

これを機能させるために、まずItemViewModelコンストラクターを実際のナビゲーションを実行するように変更しました。

function ItemViewModel(name, age) {
    var self = this;

    self.name = name;
    self.age = age;
    self.ageUrl = "/Home/Index/" + self.age;
    function navigateTo(url){
        // Before navigation we want to stop propagation of the event to avoid 
        // other handlers to handle the click and replace the url (this will 
        // ensure the row selection isn't triggered by clicking the age link)
        event.stopPropagation();
        window.location.href = url;
    }
    self.navigateToName = function(){
        navigateTo("/Home/Index?Name=" + self.name);
    };
    self.navigateToAge = function(){
        navigateTo(self.ageUrl);
    };
};

ItemViewModel次に、オブジェクトのプロパティとメソッドを使用するようにセル テンプレートを更新しました。

cellTemplate: "<a data-bind='click: $parent.entity.navigateToAge, attr: {href: $parent.entity.ageUrl}, text: $parent.entity.age'></a>"

ItemViewModel最後に、オブジェクトでメソッドを使用するように行選択ハンドラーも更新しました。

afterSelectionChange: function (rowItem, event) {
    if (event.type == 'click') {
        rowItem.entity.navigateToName();
    }
}

これらの変更を行った後、すべてがうまくいきました（jsfiddleはナビゲーションにあまり熱心ではないため、カスタムhtmlページに配置した場合）。