淘汰赛，noUiSlider，自定义绑定 [英] Knockout, noUiSlider, custom bindings

问题描述

我正在尝试使用自定义绑定将淘汰赛和noUiSlider融合在一起.我已经找到了类似的jQuery-UI滑块和Knockout代码，并以此为基础.

I am trying to meld knockout and noUiSlider with a custom binding. I have found similar code for the jQuery-UI slider and Knockout and used that as a basis.

如果我在下面使用sliderko自定义绑定，则noUisliders不会更新可观察对象.我得到NaN，在输入字段中什么也没有.

If I use the sliderko custom binding below, the noUisliders do not update the observables. I get NaN, and nothing in the input fields.

如果我直接将下面的滑块自定义绑定与noUiSlider事件一起使用，则一切正常.滑块的自定义绑定效果不佳，可能是由于跟踪了noUiSlider更新事件.但是，这是我弄清楚如何使滑块不断更新输入字段的唯一方法.

If I use the slider custom binding below with noUiSlider events directly, then everything works. The slider custom binding doesn't perform well, probably due to tracking the noUiSlider update event. However, that's the only way I could figure out how to get the slider to continuously update the input fields.

我想使用Knockout的registerEventHandler，但是我不确定如何使它工作.

I'd like to use Knockout's registerEventHandler, but I'm not sure how to get that to work.

// noUiSlider
ko.bindingHandlers.slider = {
  init: function(element, valueAccessor, allBindingsAccessor) {
    var options = allBindingsAccessor().sliderOptions || {};
    noUiSlider.create(element, options);

    // works with with noUiSlider but not with knockout event bindings
    element.noUiSlider.on('set', function(values, handle) {
      var observable = valueAccessor();
      observable(values[handle]);
    });

    // works with with noUiSlider but not with knockout event bindings
    element.noUiSlider.on('update', function(values, handle) {
      var observable = valueAccessor();
      observable(values[handle]);
    });

    ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
      element.noUiSlider.destroy();
    });
  },
  update: function(element, valueAccessor) {
    var value = ko.utils.unwrapObservable(valueAccessor());
    element.noUiSlider.set(value);

  }
};

// using knockout event handlers
ko.bindingHandlers.sliderko = {
  init: function(element, valueAccessor, allBindingsAccessor) {
    var options = allBindingsAccessor().sliderOptions || {};
    noUiSlider.create(element, options);

    ko.utils.registerEventHandler(element, 'set', function(values, handle) {
      var observable = valueAccessor();
      observable(values[handle]);
    });

    ko.utils.registerEventHandler(element, 'update', function(values, handle) {
      var observable = valueAccessor();
      observable(values[handle]);
    });

    ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
      element.noUiSlider.destroy();
    });
  },
  update: function(element, valueAccessor) {
    var value = ko.utils.unwrapObservable(valueAccessor());
    element.noUiSlider.set(value);

  }
};

// initialization for NoUiSlider - saves from adding stuff into page
var sillysv = {
  start: [10],
  step: 0.01,
  range: {
    'min': 0,
    'max': 100
  }
};

var sillysp = {
  start: [5],
  step: 0.01,
  range: {
    'min': 0,
    'max': 100
  }
};

var ViewModel = function() {
  var self = this;
  self.savings = ko.observable();
  self.spent = ko.observable();
  self.net = ko.computed(function() {
    return self.savings() - self.spent();
  });
};

ko.applyBindings(new ViewModel());

<link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.1.0/nouislider.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.1.0/nouislider.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h2>Slider Demo</h2>
Savings:
<input data-bind="value: savings" />
<div style="margin: 10px" data-bind="slider: savings, sliderOptions: sillysv"></div>

Spent:
<input data-bind="value: spent" />
<div style="margin: 10px" data-bind="slider: spent, sliderOptions: sillysp"></div>

Net: <span data-bind="text: net"></span>

推荐答案

如果您使用的是jQuery，则绑定事件与jQuery或ko registerEventHandler之间没有区别.此函数供内部使用，并且能够使绑定在不同的浏览器中正常工作.如果有jQuery，则此函数使用jQuery绑定.

If you're using jQuery there is no difference between binding events with jQuery or ko registerEventHandler. This function is for internal use, and is able to make bindings that work fine in different browsers. If jQuery is available, this function uses jQuery binding.

第二个问题，对可观察对象进行了多次更新，应该通过限制可观察对象中的更新对象来解决.您可以直接在视图模型中使用 rateLimit ko扩展器来做到这一点:

The second problem, updating the observable so many times, should be solved by throttling the upsated in the observable. You can do that using the rateLimit ko extender directly in your view model:

var ViewModel = function() {
  var self = this;
  self.savings = ko.observable()
    .extend({ rateLimit: { method: "notifyWhenChangesStop", timeout: 400 } });;
  self.spent = ko.observable()
    .extend({ rateLimit: { method: "notifyWhenChangesStop", timeout: 400 } });;
  self.net = ko.computed(function() {
     return self.savings() - self.spent();
}

如果要扩展init中的可观察对象，还可以修改自定义绑定.如果这样做，则应检查可观察对象是否尚未扩展:检查扩展是否已应用于可观察对象.

You can also modify the custom binding if you want to extend the observables in the init. if you do so, you should check that the observable is not already extended: Check if extension was applied to observable.

这篇关于淘汰赛，noUiSlider，自定义绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！