仅在滑块停止后更新滑块
update slider only after the slider stops
本文关键字:更新 更新时间:2023-09-26
>我有一个使用 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
,但我希望在滑块停止拖动后立即调用它。
现在,当我拖动滑块时,它会停止在所有点上,直到到达目标。
你只需要替换:
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>
我发现了代码中的错误,我只是在 valueUpdate 中写了太多,只是写这个
valueUpdate: 'afterkeydown'
取而代之的是这个
valueUpdate:['afterkeydown','propertychange','input']
完美工作!
相关文章:
- Javascript循环不会自我更新
- 添加文字和评论功能更新Div
- AngularJS:ng之后,重复$scope值未按预期更新
- 如何通过数组更新角度子范围
- Ajax聊天消息重复而不仅仅是更新
- 通过CSV文件上载更新数据库表
- 平均值:无法将数据更新到数据库
- $rootScope未使用forEach进行更新
- d3基于用户选择动态更新节点
- 有条件更新d3.js力图中节点的最佳方法
- Angular:更新一次性绑定的数据
- Javascript更新孙窗口中的表单元素
- 使用AngularJS中的筛选器更新给定的表
- 从选项页面更新chrome扩展清单权限
- 如何在不刷新页面的情况下更新显示框
- 延期承诺值未更新/解析/延期
- 标记的实时更新,无需加载页面谷歌地图API V3
- 使用mongodb更新中的一个变量
- 访问jsrender模板中的全局javascript变量并更新它
- 通过单击动态加载的表中同一行的另一个字段来更新一行的字段