javascript - Hovercard 在带绑定(bind)的 knockoutJS 中不显示

Question

我得到了这张悬停卡片，我想在子菜单中显示它。它在标题中工作，但不知何故，当在子菜单“with:$root.chosenMenu”-bindings 中时，悬停效果不会启动。

这是我的代码:

HTML:

<div>
    <span class="previewCard">    
        <label class="hovercardName" data-bind="text: displayName"></label>
        <span class="hovercardDetails">     
            <span data-bind="text: miniBio"></span>.<br/>
            <a data-bind="attr: { href: webpage, title: webpage }, text: webpage">My blog</a>
        </span>
    </span> 
    <br/><br/>
    <div class="wysClear wysLeft buttonRow">
        <a href="#pid1" data-bind="click: function(){$root.chosenMenu('a');return false;}">Panel A</a>
        <a href="#pid2" data-bind="click: function(){$root.chosenMenu('b');return false;}">Panel B</a>
    </div>
</div>
<hr/>
<div data-bind="with: $root.chosenMenu">
    <div id="pid1" data-bind="visible: $root.chosenMenu() === 'a'">
        panel A: <br/><br/>
        <span class="previewCard">    
            <label class="hovercardName" data-bind="text: $root.displayName"></label>
            <span class="hovercardDetails">     
                <span data-bind="text: $root.miniBio"></span>.<br/>
                <a data-bind="attr: { href: $root.webpage, title: $root.webpage }, text: $root.webpage">My blog</a>
            </span>
        </span> 
    </div>
    <div id="pid2" data-bind="visible: $root.chosenMenu() === 'b'">
        panel B: <br/><br/>
        <span class="previewCard">    
            <label class="hovercardName" data-bind="text: $root.displayName"></label>
            <span class="hovercardDetails">     
                <span data-bind="text: $root.miniBio"></span>.<br/>
                <a data-bind="attr: { href: $root.webpage, title: $root.webpage }, text: $root.webpage">My blog</a>
            </span>
        </span> 
    </div>
</div>

Javascript:

viewModel = function(){
    var self = this;

    self.chosenMenu = ko.observable();
    self.displayName = ko.observable("Asle G");
    self.miniBio = ko.observable("Everywhere we go - there you are!");
    self.webpage = ko.observable("http://blog.a-changing.com")
};

ko.applyBindings( new viewModel() );

// hovercard
$(".previewCard").hover(function() {
    $(this).find(".hovercardDetails").stop(true, true).fadeIn();
}, function() {
    $(this).find(".hovercardDetails").stop(true, true).fadeOut();
});

CSS:

.previewCard {
    position:relative;            
}
.hovercardName {    
    font-weight:bold;    
    position:relative;    
    z-index:100; /*greater than details, to still appear in card*/
}
.hovercardDetails {            
    background:#fff ;    
    border:solid 1px #ddd;      
    position:absolute ;
    width:300px;
    left:-10px;
    top:-10px;
    z-index:50; /*less than name*/
    padding:2em 10px 10px; /*leave enough padding on top for the name*/   
    display:none;
}

fiddle :http://jsfiddle.net/AsleG/jb6b61oh/

Answer 1

您有一个经典的 jQuery 问题:事件处理程序仅附加到当时存在的元素。

这会将 hover (mouseenter/mouseleave) 事件处理程序附加到唯一的 .previewCard 上:

$(".previewCard").hover(function() {
    $(this).find(".hovercardDetails").stop(true, true).fadeIn();
}, function() {
    $(this).find(".hovercardDetails").stop(true, true).fadeOut();
});

但是如果 knockout 动态地创建一些，它们将没有任何事件处理程序。因此，您必须将事件处理委托(delegate)给层次结构中更高的节点。

$(document).on("mouseenter", ".previewCard", function() {
    $(this).find(".hovercardDetails").stop(true, true).fadeIn();
}).on("mouseleave", ".previewCard", function() {
    $(this).find(".hovercardDetails").stop(true, true).fadeOut();
});

---

这仍然不是解决问题的干净方法。为什么不创建一个 hovercard 绑定(bind)处理程序并完全摆脱 View 模型中的 jQuery 代码？

ko.bindingHandlers.hovercard = {
    init: function (element) {
        $(element).hover(function() {
            $(this).find(".hovercardDetails").stop(true, true).fadeIn();
        }, function() {
            $(this).find(".hovercardDetails").stop(true, true).fadeOut();
        });
    }
};

用作:

<span class="previewCard" data-bind="hovercard: true">

http://jsfiddle.net/jb6b61oh/6/