마우스 입력시 지연로드 바인딩

Question

격자와 같은 대형 HTML Excel의 각 셀에 다음 바인딩을 사용하고 있습니다. 지금 당장 나는 모든 세포에 구속력을 지니고있다. 게으름에 마우스를 가져 가면 특정 지연을 넘어서서 이것을 행하는 방법이있어서 각 세포는 그것을 활성화시킬 필요가 없다? 마우스가 2 초 동안 셀 위에 있으면 툴팁 바인딩이 활성화되어 표시됩니다. 이 툴팁은 부트 스트랩 툴팁입니다.

ko.bindingHandlers.tooltip = { 
     init: function (element, valueAccessor) { 
      $(element).tooltip(); 

      ko.utils.domNodeDisposal.addDisposeCallback(element, function() { 
       $(element).tooltip("destroy"); 
      }); 
     } 
    }; 

Answer 1

대신 셀 당 하나의 이벤트 핸들러를 추가하는, 당신은 세포 컨테이너에 하나의 이벤트 핸들러를 추가 할 수 있습니다.

ko.bindingHandlers.tooltipContainer = { 
    init: function (element, valueAccessor) { 
     $(element).on('hover', '.cell', function() { 
      $(this).tooltip(); 
     }); 

     ko.utils.domNodeDisposal.addDisposeCallback(element, function() { 
      $(element).tooltip("destroy"); 
     }); 
    } 
}; 

당신은 상단에 타임 아웃을 추가 할 경우이

ko.bindingHandlers.tooltipContainer = { 
    init: function (element, valueAccessor) { 
     $(element).on('hover', '.cell', function() { 
      var $this = $(this), 
       callback = function() { $this.tooltip(); }; 

      setTimeout(callback, 2000); 
     }); 

     ko.utils.domNodeDisposal.addDisposeCallback(element, function() { 
      $(element).tooltip("destroy"); 
     }); 
    } 
}; 

작동합니다 :

<div class="cell-container" data-bind="tooltipContainer: true"> 
    <div class="cell"></div> 
    <div class="cell"></div> 
    <div class="cell"></div> 
</diV> 

당신이 바인딩을 사용할 수있는 마크 업을 감안할 때.