淘汰賽可見的綁定與懸停？

我有以下幾點：淘汰賽可見的綁定與懸停？

<input type="checkbox" data-bind="visible: selectedItemsCount() > 0, attr: { value: itemId()}, checked: $parent.selectedFolderIds" />

我想要做的就是添加另一個條件，這樣，如果用戶將鼠標懸停在元素上可見被激活。有沒有辦法在可見的綁定中做到這一點？例如：

<input type="checkbox" data-bind="visible: selectedItemsCount() > 0 || isHovering(), attr: { value: itemId()}, checked: $parent.selectedFolderIds" />

來源

2013-04-30 SB2055

值，你可以與你正在試圖做的更清楚了嗎？我從你的問題中得到的結果是，你想在用戶懸停在元素上時激活元素上的可見綁定？ – bflemi3 2013-05-01 14:04:33

通常，避免將邏輯直接放入HTML中的Knockout綁定是一個好習慣。不是世界末日，但它可以很快導致一條混亂的道路。

如果可能，請使用自定義綁定爲您的可見性提供所需的UI行爲。將該邏輯放入自定義綁定中很有用，因爲它將實現細節與視圖分開。稍後您可以決定不是更改可見性，而是想添加/刪除一些CSS來控制外觀，或者您想添加一些動畫。

這裏是一個非常簡單的綁定，設置懸停能見度：

ko.bindingHandlers.hoverTargetId = {}; 
ko.bindingHandlers.hoverVisible = { 
    init: function (element, valueAccessor, allBindingsAccessor) { 

     function showOrHideElement(show) { 
      var canShow = ko.utils.unwrapObservable(valueAccessor()); 
      $(element).toggle(show && canShow); 
     } 

     var hideElement = showOrHideElement.bind(null, false); 
     var showElement = showOrHideElement.bind(null, true); 
     var $hoverTarget = $("#" + ko.utils.unwrapObservable(allBindingsAccessor().hoverTargetId)); 
     ko.utils.registerEventHandler($hoverTarget, "mouseover", showElement); 
     ko.utils.registerEventHandler($hoverTarget, "mouseout", hideElement); 
     hideElement(); 
    } 
};

使用方法如下：

<div><label id='hoverTarget'>Hover to see the details</label></div> 
<div data-bind="hoverVisible: hasItems, hoverTargetId: 'hoverTarget'">Here's the details</div>

See the Fiddle

一對夫婦的其他建議：

在您的視圖模型中定義一個屬性，該屬性表示允許顯示元素的應用程序邏輯，比如hasItems。
使用built-in checked binding結合的input type='checkbox' />

來源

2013-05-01 13:47:30

哇。謝謝！ – SB2055 2013-05-01 14:29:35

只是好奇你爲什麼使用jQuery來獲取$ hoverTarget，但ko.utils.registerEventHandler來附加事件。 knockout util做了一些特殊的事情，$（）。on（）沒有？ – arkanciscan 2013-09-29 21:47:16

@arkanciscan，是的，還有一些額外的邏輯可以讓事件變得更加友好。值得一看knockout-debug.js源代碼來檢查該函數內發生了什麼。 – 2013-09-30 14:34:02

淘汰賽可見的綁定與懸停？

回答

相關問題