Question

我使用knockout将noUiSlider与inputMax和valueMin绑定。更改滑块后更新输入，但这不能流畅地工作。我想在输入中看到滑块的值。

我有代码

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

因此自定义绑定的更新方法非常繁重。直接使用模型（var model = viewModel;）而不是valueAccessor处理init中的更新将改善您遇到的ui输入延迟。

Knockout noUiSlider自定义绑定流畅性

1 个答案: