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事件时，处理程序将自动接收绑定到trigger元素的项作为参数，以便您可以访问它。您可以像这样修改代码以使其正常工作：

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＆＃34;弹出ko自定义绑定＆＃34;你可能会找到其他实现。在这里你有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敲除绑定

2 个答案: