Question

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

如果我在下面使用sliderko自定义绑定，则noUisliders不会更新observable。我得到NaN，输入字段中没有任何内容。

如果我直接使用下面的滑块自定义绑定和noUiSlider事件，那么一切正常。滑块自定义绑定不能很好地执行，可能是由于跟踪noUiSlider更新事件。但是，这是我能够弄清楚如何让滑块连续更新输入字段的唯一方法。

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

＆＃13;

// 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());

＆＃13;

<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>

＆＃13;

Answer 1

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

第二个问题，更新observable这么多次，应该通过限制observable中的upated来解决。您可以直接在视图模型中使用rateLimit ko extender执行此操作：

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中扩展observable，也可以修改自定义绑定。如果你这样做，你应该检查observable是否已经扩展：Check if extension was applied to observable。

Knockout，noUiSlider，自定义绑定

1 个答案: