如何更改jquery範圍滑塊在挖空中的最小值和最大值？

Question

我正在嘗試將jQuery UI滑塊綁定到我的模型，並且想要更改最小和最大票價更改的最小值和最大值。

例如，如果：

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





    }); 

Answer 1

擴展您的自定義綁定處理

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>