knockout.js를 사용하여 마우스 스크롤의 입력 값 변경

Question

HTML 뷰에 여러 개의 입력이 있는데 다음과 같은 기능을 추가하고 싶습니다. 입력 위에 마우스를 놓고 마우스 스크롤을 사용하면 그 값 입력 변경 (텍스트 입력의 경우 배열에서 다른 색인을 선택하거나 숫자 입력의 경우 오름차순/내림 값). event 바인딩을 사용하는 것은 그 입력과 다른 설정에 다른 뷰 모델을 사용하고 있으므로 관찰 할 수있는 값을 확장하는 익스텐더를 사용하려고 생각했지만 이벤트를 대상으로하는 방법을 실제로 알지 못합니다 (엘리먼트에서 mousescroll). Extender가 올바른 방향인지, 아니면 그 대신에 event bindings를 사용해야합니까?

Answer 1

저는 맞춤 바인딩 처리기가 이동하는 방법이라고 생각합니다. DOM 통신에 대한 모든 모델은 핸들러를 통해 수행되어야합니다. Extender는 관측 가능 기능에 추가 기능을 추가하는 방법 일뿐입니다.

ko.bindingHandlers.wheel = { 
    init: function(element, valueAccessor) { 
     var value = valueAccessor(); 
     var handler = function (e) { 
       var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));    
       value(value() + delta); 
     }; 
     // IE9, Chrome, Safari, Opera 
     element.addEventListener("mousewheel", handler, false); 
     // Firefox 
     element.addEventListener("DOMMouseScroll", handler, false); 
    } 
}; 

Working fiddle

다음은 그러한 핸들러의 예는