HoverIntent淘汰赛的绑定

Question

我有一个由淘汰赛数据绑定动态呈现的项目列表。我需要绑定hoverIntent事件，而不是mouseover和mouseleave事件。

<a data-bind="attr: { title: $data.Header, href: $root.GetUrl() }, event: { mouseover: function() { $root.showPopup($data.Id) }, mouseleave: function() { $root.hidePopup($data.Id) } }"> 
<span data-bind="html: $data.Header"></span> </a> 

其功能简单如下;

self.showPopup = function(id) { 
    $("#popup-"+id).slideDown(); 
}; 

self.hidePopup = function(id) { 
    $("#popup-"+id).slideUp(); 
}; 

请帮忙。谢谢

Answer 1

自定义绑定是你应该怎么做的。在这种情况下，一个围绕$().hoverIntent的简单包装应该就足够了。

ko.bindingHandlers.hoverIntent = { 
    // note: if your hoverIntent options are not observable/ subject to change, 
    // you would be better off specifying this function as init, not update 
    update: function(elem, value) { 
     var options = ko.utils.unwrapObservable(value()); 
     if (typeof options === 'object') { 
      for (var option in options) 
       options[option] = ko.utils.unwrapObservable(options[option]); 
     } 
     $(elem).hoverIntent(options); 
    } 
} 

以上的结合实现了对hoverIntent parameter syntaxes 2：.hoverIntent(handlerInOut)和.hoverIntent(optionsObject)，例如：

<a data-bind="hoverIntent: $root.togglePopup">handlerInOut param</a> 
<a data-bind="hoverIntent: { 
    over: $root.showPopup, 
    out: $root.hidePopup, 
    timeout: timeout }">optionsObject param</a> 

看到它在行动中a fiddle。

Answer 2

绑定ko事件时，处理程序会自动接收绑定到触发元素的项作为参数，以便您可以访问它。您可以修改这样的代码，使其工作：

HTML浏览：

<a data-bind="attr: { title: $data.Header, href: $root.GetUrl() }, 
    event: { mouseover: $root.showPopup, mouseleave: $root.hidePopup}"> 
<span data-bind="html: $data.Header"></span> </a> 

视图模型：

self.showPopup = function(data) { 
    $("#popup-"+data.id).slideDown(); 
}; 

self.hidePopup = function(id) { 
    $("#popup-"+id).slideUp(); 
}; 

而且，更好的是这一点，你可以使用自定义绑定直接管理弹出窗口。 This Q&A is related和this。如果你是google“popup ko自定义绑定”，你可能会想到其他的实现。在这里你有a perfect explanation of custom bindings，以防你必须实现你自己的。