녹아웃의 jquery range 슬라이더 최소값과 최대 값을 변경하는 방법은 무엇입니까?

Question

내 모델에 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()); 





    }); 

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>