Knockout noUiSlider benutzerdefinierte Bindung fließend

Question

Ich verwende Knockout, um noUiSlider mit EingabewertMax und ValueMin zu binden. Nach Änderung ist der Schieberegler Update-Eingabe, aber dies funktioniert nicht flüssig. Ich würde gerne den Wert des Schiebereglers in der Eingabe sehen.

Ich habe Code

HTML

<div class="col-xs-12"> 
    <div class="row"> 
    <div class="slider" data-bind="noUiSliderPrice: {minValue: min, maxValue: max}"> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="pull-left"> 
     <input data-bind="textInput: min" /> 
    </div> 
    <div class="pull-right"> 
     <input data-bind="textInput: max" /> 
    </div> 
    </div> 
</div> 

JS

ko.bindingHandlers.noUiSliderPrice = { 
    init: function(element, valueAccessor, allBindingsAccesor, viewModel, bindingContext) { 
    var params = valueAccessor(); 
    noUiSlider.create(element, { 
     start: [1, 10000000], 
     range: { 
     'min': 1, 
     'max': 1000000 
     }, 
     connect: true, 
     step: 1, 
    }); 
    element.noUiSlider.on('slide', function(values, handle) { 
     var value = values[handle]; 
     if (handle) { 
     params.maxValue(value); 

     } else { 
     params.minValue(value); 
     } 
    }); 
    }, 
    update: function(element, valueAccessor, allBindingsAccesor, viewModel, bindingContext) { 
    var params = valueAccessor(); 
    var range = [params.minValue(), params.maxValue()]; 
    element.noUiSlider.set(range); 
    } 
}; 
var model = function() { 
    var self = this; 

    self.min = ko.observable().extend({ 
    throttle: 100 
    }); 
    //with extend input has latency 
    self.max = ko.observable(); 
    //without extend input don't work fluently 
}; 

ko.applyBindings(new model()); 

fiddle

Answer 1

So ist die Update-Methode für die benutzerdefinierte Bindung ziemlich schwer. Wenn Sie das Update in der init mithilfe des Modells (var model = viewModel;) direkt anstelle von valueAccessor verarbeiten, verbessert sich die ui-Eingabeverzögerung, die aufgetreten ist. Hier ist eine aktualisierte JSFiddle.