Ändern Sie den Wert der Eingabe auf Maus scrollen mit knockout.js

Question

Ich habe mehrere Eingaben auf meiner HTML-Ansicht, und ich möchte eine Funktionalität hinzufügen: Wenn Sie den Mauszeiger über eine Eingabe und Sie verwenden Maus scrollen, den Wert davon Eingabe ändert sich (wählt einen anderen Index von einem Array für Texteingaben aus oder erhöht den Wert für numerische Werte). Die Verwendung von event Bindung ist nicht sehr ausreichend für mich, da ich verschiedene Viewmodels für diese Eingaben und verschiedene Einstellungen verwende, also dachte ich an einen Extender, der einen beobachtbaren Wert erweitert, aber ich weiß nicht wirklich, wie man Ereignisse anvisiert (mousescroll über ein Element) in diesem Extender. Ist Extender ein richtiger Weg zu gehen, oder soll ich stattdessen mit diesen event Bindings auf der Seite bleiben?

Answer 1

Ich glaube, dass Custom-Binding-Handler ein Weg ist zu gehen. Die gesamte Kommunikation zwischen Modell und DOM sollte über Handler erfolgen. Extender sind nur die Möglichkeit, einer Observable zusätzliche Funktionalität hinzuzufügen. Hier ist ein Beispiel für eine solche 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