Измените значение ввода при прокрутке мыши с помощью knockout.js

Question

У меня есть несколько входов в моем представлении html, и я хотел бы добавить такую ​​функциональность: когда вы наводите курсор мыши на ввод и используете прокрутку мыши, значение этого ввода изменяется (выбирает другой индекс из массива для ввода текста или повышения / уменьшить значение для числовых). С помощью event привязки для меня недостаточно, так как я использую разные модели представления для этих входов и разные настройки, поэтому я думал об использовании расширителя, который расширяет наблюдаемое значение, но я не знаю, как нацеливать события (mousescroll over элемент) в этом расширителе. Является ли расширитель правильным способом, или я должен вместо этого придерживаться тех event крепления на боковой панели?

Answer 1

Я считаю, что пользовательский связующий обработчик - это путь. Вся связь модели с DOM должна осуществляться через обработчики. Расширители - это просто способ добавить дополнительную функциональность к наблюдаемому. Вот пример такого обработчика:

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

Рабочая скрипка