Change value of input on mouse scroll with knockout.js

Question

I have several inputs on my html view and i'd like to add a functionality of such: when you hover over an input and you use mouse scroll, the value of that input changes (picks another index from an array for text inputs or ascend/descend value for numeric ones). Using event binding isn't very sufficient for me as I am using different viewmodels for those inputs and different settings, thus, I was thinking of using an extender that extends an observable value, but I don't really know how to target events (mousescroll over an element) in that extender. Is extender a right way to go, or shall I instead stick with those event bindings on view side?

Answer 1

I believe that custom binding handler is a way to go. All the model to DOM communication should be done via handlers. Extenders are just the way to add additional functionality to an observable. Here is an example of such handler:

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