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

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

而且，更好的是，您可以使用直接管理弹出窗口的自定义绑定。 , and this. You'll propbably find other implementations if you google "popup ko custom binding". And here you have a perfect explanation of custom bindings，以防您必须自己实施。

Answer 2

自定义绑定是您应该做的。在这种情况下，围绕 $().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 中查看实际效果。

HoverIntent 敲除绑定

HoverIntent knockout binding

javascript

jquery

knockout.js

hoverintent