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参数语法：.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>

在小提琴中可以看到它的作用。

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

而且，更好的是，您可以使用直接管理弹出窗口的自定义绑定。这个问答是相关的和这。如果谷歌“弹出ko自定义绑定”，您可能会找到其他实现。这里有对定制绑定的完美解释，以防您必须实现自己的。