仅在滑块停止后更新滑块答案

【问题标题】：update slider only after the slider stops仅在滑块停止后更新滑块
【发布时间】：2016-05-13 18:58:05
【问题描述】：

我有一个使用jquery-ui slider 的knockout.js 滑块。

<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，但我希望在滑块停止拖动后立即调用它。

现在，当我拖动滑块时，它会停在所有点上，直到到达目标为止。

【问题讨论】：

请设置一个最小、完整且可验证的示例stackoverflow.com/help/mcve
滑块使用juqery-ui 滑块？喜欢this?
@AndreaCasaccia 我只是想知道一种在滑块停止移动时更新滑块值的方法，不需要更少或更多信息。
@MoshFeu 是的，我需要在按下键后更新值，但在我的情况下它不起作用，它会在每个步骤中更新值

标签： javascript jquery jquery-ui knockout.js jquery-ui-slider

【解决方案1】：

你只需要替换：

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

到

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

和

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

到

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>

【讨论】：

【解决方案2】：

发现我的代码出错了刚才在valueUpdate里写的有点多，就这么写了

valueUpdate: 'afterkeydown'

不是这个

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

完美运行！

【讨论】：