обновить ползунок только после того, как ползунок остановится

У меня есть ползунок knockout.js, использующий jquery-ui slider.

<input id="ex2" data-slider-id="ex2Slider" type="text" data-bind="sliderValue: {value: borrowOrInvestAmount, min:0, max: 5000, step: 1, formatter:formatter2}, event: { change: $root.getInvestmentDetailsForBorrower }, valueUpdate:['afterkeydown','propertychange','input']" style="display: none;">

Поэтому я попытался использовать value-update, но это не сработало. Теперь, когда я нажимаю на точки ползунка, не перетаскивая его, он работает нормально и вызывает $root.getInvestment, но я хочу, чтобы это вызывалось сразу после того, как ползунок перестает перетаскиваться.

Теперь, когда я перетаскиваю ползунок, он останавливается во всех точках, пока не достигнет своей цели.


javascript jquery jquery-ui knockout.js jquery-ui-slider
person XAF    schedule 04.02.2016    source источник
comment
Установите минимальный, полный и проверяемый пример stackoverflow.com/help/mcve.   -  person Andrea Casaccia    schedule 04.02.2016
comment
слайдер с помощью слайдера juqery-ui? нравится это?   -  person Mosh Feu    schedule 04.02.2016
comment
@AndreaCasaccia Я просто хочу знать, как обновить значение моего ползунка, когда он перестает двигаться, информации не меньше и не больше.   -  person XAF    schedule 04.02.2016
comment
@MoshFeu да, мне нужно обновить значение после нажатия клавиши, но в моем случае это не работает, оно обновляет значение на каждом шаге   -  person XAF    schedule 04.02.2016

Ответы (2)


arrow_upward
1
arrow_downward

Вам просто нужно заменить:

ko.utils.registerEventHandler(element, "slidestop",..)

To

ko.utils.registerEventHandler(element, "slidestop",...)

И

ko.utils.registerEventHandler(element, "slide", function (event, ui) {...

To

ko.utils.registerEventHandler(element, "stop", function (event, ui) {...

Это изменение изменит событие, при котором происходят изменения с slide на stop.

Рабочий пример:

ko.bindingHandlers.slider = {
  init: function (element, valueAccessor, allBindingsAccessor) {
    var options = allBindingsAccessor().sliderOptions || {};
    $(element).slider(options);
    ko.utils.registerEventHandler(element, "slidestop", function (event, ui) {
        var observable = valueAccessor();
        observable(ui.value);
    });
    ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
        $(element).slider("destroy");
    });
    ko.utils.registerEventHandler(element, "stop", function (event, ui) {
        var observable = valueAccessor();
        observable(ui.value);
    });
  },
  update: function (element, valueAccessor) {
    var value = ko.utils.unwrapObservable(valueAccessor());
    if (isNaN(value)) value = 0;
    $(element).slider("value", value);
  }
};


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

ko.applyBindings(new ViewModel());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>

<h2>Slider Demo</h2>

Savings: <input data-bind="value: savings, valueUpdate: 'afterkeydown'" />
<div style="margin: 10px" data-bind="slider: savings, sliderOptions: {min: 0, max: 100, range: 'min', step: 1}"></div>

Spent: <input data-bind="value: spent, valueUpdate: 'afterkeydown'" />
<div style="margin: 10px" data-bind="slider: spent, sliderOptions: {min: 0, max: 100, range: 'min', step: 1}"></div>

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

person Mosh Feu    schedule 04.02.2016

arrow_upward
0
arrow_downward

Я обнаружил ошибку в своем коде, я просто слишком много написал в valueUpdate, просто написав это

valueUpdate: 'afterkeydown'

Вместо этого

valueUpdate:['afterkeydown','propertychange','input']

Работает отлично!

person XAF    schedule 04.02.2016