Knockout.js 淘汰KoGrid:如何在KoGrid中双击行和链接?

Knockout.js 淘汰KoGrid:如何在KoGrid中双击行和链接?,knockout.js,kogrid,Knockout.js,Kogrid,更新: 请检查并建议如何在koGrid中使用列值作为链接,以及如何在koGrid中同时使用双击功能,即使用年龄列作为链接,当单击该链接时,会将我带到主页/关于页面,当我双击任何行时,会将我带到主页/索引页面 [这里]: 谢谢 Priyanka问题在于行选择处理鼠标单击,因此我们希望确保不允许单击事件传播到行选择处理程序,我们可以使用方法event.stopPropagation 为了实现这一点,我首先更改了ItemViewModel构造函数来执行实际的导航 function ItemViewMo

更新:

请检查并建议如何在koGrid中使用列值作为链接,以及如何在koGrid中同时使用双击功能,即使用年龄列作为链接,当单击该链接时,会将我带到主页/关于页面,当我双击任何行时,会将我带到主页/索引页面

[这里]:

谢谢
Priyanka

问题在于行选择处理鼠标单击,因此我们希望确保不允许单击事件传播到行选择处理程序,我们可以使用方法
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>"
afterSelectionChange: function (rowItem, event) {
    if (event.type == 'click') {
        rowItem.entity.navigateToName();
    }
}

在做了这些修改之后,一切都很顺利(如果我把它放在一个自定义html页面中,因为JSFIDLE不太喜欢导航)。

你能给我看一些代码吗?或者最好还是给我看一个正在工作的JSFIDLE,看看你的问题历史,你问了9个问题,回答了19个问题,只把1标记为已接受。没有一个答案有用吗?我建议你标记那些对你帮助最大的答案,首先是让有同样问题的人看到是什么解决了/帮助了你的问题,其次是给那些花时间试图帮助你的人一些信任。如果没有答案可以帮助您解决问题,您可以用最终解决方案回答自己的问题,并将自己的答案标记为正确。谢谢tanner。我将标记接受为我工作的答案。我将发布代码供您参考。@Tanner:请参考我的问题以获得详细参考,并让我知道解决方案。您可以在JSFIDLE、jsbin、plunker或类似服务上设置一个显示您的问题的页面吗?这将使帮助你解决问题变得更容易。
afterSelectionChange: function (rowItem, event) {
    if (event.type == 'click') {
        rowItem.entity.navigateToName();
    }
}