我正在尝试将jQuery UI Slider绑定到我的模型,我想在最小和最大票价更改时更改它的最小值和最大值。
例如,如果:
minFare = 0, maxFare = 100
然后:
slider {min:0,max:100,values:[20,30],range:true}
重新计算或改变时:
minFare = 20, maxFare = 80
然后:
slider {min:20,max:80,values:[20,30],range:true}
$(function () {
//Custom binging for jquery ui range slider
ko.bindingHandlers.RangeSlider = {
init: function (element, valueAccessor, allBindingsAccessor) {
var options = valueAccessor() || {};
var others = allBindingsAccessor() || {};
options.change = function (e, ui) {
others.MinVal(ui.values[0]);
others.MaxVal(ui.values[1]);
}
others.change = function () { }
$(element).slider(options);
}
};
function Result(WSRObj) {
var self = this;
self.Airline = WSRObj.Segment[0].Airline;
self.DepTime = WSRObj.Segment[0].DepTIme.substr(11, 5);
self.ArrTime = WSRObj.Segment[0].ArrTime.substr(11, 5);
self.Fare = ko.observable(parseInt(WSRObj.Fare.OfferedFare));
}
function SRVM() {
var self = this;
self.ArrTime = ko.observable(0);
self.DepTime = ko.observable(1440);
//fare range
self.MinFare = ko.observable(0);
self.MaxFare = ko.observable(100000);
self.Results = ko.observableArray([]);
self.addResult = function (result) {self.Results.push(new Result(result)); };
self.removeResult = function (result) { self.Results.remove(result) };
self.losdResponce = function () {
$.ajax({
dataType: "json",
url: "responce.json",
data: "",
success: function (data) {
var WSSRes = data;
var AllResult = (WSSRes.Result !== undefined) ? WSSRes.Result : [];
for (var result in AllResult) {
var resobj = AllResult[result];
var fare = parseInt(resobj.Fare.OfferedFare);
var min = self.MinFare(); var max = self.MaxFare();
if (result == 0) { min = fare; max = fare; }
self.MinFare(min > fare ? fare : min);
self.MaxFare(max < fare ? fare : max);
self.addResult(resobj);
}
}
});
}
}
ko.applyBindings(new SRVM());
});
答案 0 :(得分:0)
扩展自定义绑定处理程序
ko.bindingHandlers.RangeSlider = {
init: function (element, valueAccessor, allBindingsAccessor) {
var options = valueAccessor() || {};
var others = allBindingsAccessor() || {};
options.change = function (e, ui) {
others.MinVal(ui.values[0]);
others.MaxVal(ui.values[1]);
}
others.change = function () { }
$(element).slider(options);
},
update: function (element, valueAccessor) {
var options = ko.utils.unwrapObservable(valueAccessor()) || {},
min = ko.utils.unwrapObservable(options.min),
max = ko.utils.unwrapObservable(options.max);
$(element).slider('option', 'min', min);
$(element).slider('option', 'max', max);
}
};
我假设你绑定了可观察的设置,或者至少你的设置中的最小值和最大值应该是可观察的:
var vm = function () {
this.options = ko.observable({
min: ko.observable(10),
max: ko.observable(100)
});
};
<div data-bind="RangeSlider: options"></div>