Question

我在html视图上有几个输入，我想添加这样的功能：当你将鼠标悬停在输入上并使用鼠标滚动时，该输入的值会发生变化（从数组中选择另一个索引）用于文本输入或用于数字输入的上升/下降值）。使用NODE EXPLANATION ---------------------------------------------------------------------- (?<= look behind to see if there is: ---------------------------------------------------------------------- \s whitespace (\n, \r, \t, \f, and " ") ---------------------------------------------------------------------- ) end of look-behind ---------------------------------------------------------------------- (?= look ahead to see if there is: ---------------------------------------------------------------------- [^aeiouy] any character except: 'a', 'e', 'i', 'o', 'u', 'y' ---------------------------------------------------------------------- ) end of look-ahead ---------------------------------------------------------------------- [a-z]{3,4} any character of: 'a' to 'z' (between 3 and 4 times (matching the most amount possible)) ---------------------------------------------------------------------- (?= look ahead to see if there is: ---------------------------------------------------------------------- \s whitespace (\n, \r, \t, \f, and " ") ---------------------------------------------------------------------- ) end of look-ahead ----------------------------------------------------------------------绑定对我来说已经足够了，因为我正在为这些输入和不同的设置使用不同的视图模型，因此，我正在考虑使用扩展器来扩展可观察的值，但我并没有这样做。我真的知道如何在该扩展器中定位事件（mousescroll over a element）。扩展器是一种正确的方法，还是我应该在视图方面坚持使用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);
    }
};

Working fiddle

使用knockout.js更改鼠标滚动上的输入值

1 个答案: