ノックアウトnoUiSliderカスタムバインディングの流暢

Question

私はノックアウトを使用して、input valueMaxとvalueMinを持つnoUiSliderをバインドします。変更後、スライダーは更新入力ですが、これはうまく機能しません。私は、入力時にスライダーの価値を常に見たいと思います。

私はコード

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

したがって、カスタムバインディングの更新メソッドはかなり重いです。 valueAccessorの代わりにモデル（var model = viewModel;）を使用してinitで更新を処理すると、発生していたUI入力の遅延が改善されます。ここに更新されたJSFiddleがあります。