KnockOut koGrid :如何在KoGrid中进行行双击和链接？

Question

更新：

请检查并建议如何在koGrid中使用列值作为链接，以及如何同时在Kogrid中使用双击功能，即年龄列作为链接，单击该链接时可以将我带到home/about页面，当我双击任何行时，它会带我到home/Index页面。

这里：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();
    }
}

做完这些更改后，一切都对我很好(如果我把它放在自定义的html页面中，因为jsfiddle对导航不太感兴趣)。