ノックアウトでホバーとバインディングが見える？

Question

私は、次があります。

<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" /> 

Answer 1

一般に、論理をHTML内のKnockoutバインディングに直接入れないようにすることをお勧めします。世界の終わりではありませんが、それはすぐに乱雑な道を導くことができます。

可能であれば、カスタムバインディングを使用して、ユーザーの視認性に適したUI動作を提供します。実装の詳細をビューから分離するため、カスタムバインディング内にそのロジックを配置すると便利です。後で、可視性を変更する代わりに、外観を制御するためにCSSを追加/削除したり、アニメーションを追加したりすることもできます。ここで

はホバー上の可視性を設定し、その結合は非常に簡単です：

<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

---

カップル他の勧告：

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

はこのようにそれを使用します

1. ビューモデルで、要素が表示されることが許可されているかどうかのアプリケーションロジックを表すプロパティを定義します。例：hasItems。
2. あなたはあなたがしようとしているものをより明確にすることができますinput type='checkbox' />