값 및 이벤트 검도 슬라이더 및 검도 관측 클래스를 바인딩하는 방법

Question

검도 슬라이더에 입력 상자를 바인딩하려고했는데이 방법을 이끌어 냈습니다. 이와 같은 요구 사항을 구현하는 데 더 나은 방법이 있다면 함께 공유하시기 바랍니다. 감사.

Answer 1

HTML

<div id="testID" class="control-group"> 
    <label class="control-label" for="">Weekly Rent Amount($)</label> 
    <div class="controls"> 
     <div data-role="rangeslider" 
      data-min="1" 
      data-max="1000" 
      data-smallstep="5" 
      data-largestep="10" 
      data-tickplacement="both" 
      data-bind="value: rent, events:{change: rentOnChange}"> 
      <input /> 
      <input /> 
     </div> 
     <input data-bind="value: rentMin, events:{change: rentOnChange}" /> 
     <input data-bind="value: rentMax, events:{change: rentOnChange}" /> 
    </div> 
</div> 

---

SCRIPT

var viewModel = kendo.observable({ 
    sliderValue: 5, 
    rentMin:"", 
    rentMax:"", 
    rent:function(){ 
     return [this.get("rentMin"),this.get("rentMax")] 
    }, 
    rentOnChange:function(e){ 
     if(typeof e.values==="undefined"){ 
      this.set("rent",[this.get("rentMin"),this.get("rentMax")]) 
     }else{ 
      var rentval = e.values; 
      this.set("rentMin",rentval[0]); 
      this.set("rentMax",rentval[1]) 
     } 


    } 
}); 
kendo.bind($("#testID"), viewModel); 

Answer 2

무엇에 대해 :

HTML :

<div id="testID" class="control-group"> 
    <label class="control-label" for="">Weekly Rent Amount($)</label> 
    <div class="controls"> 
     <div data-role="rangeslider" 
      data-min="1" data-max="1000" 
      data-smallstep="5" data-largestep="10" 
      data-tickplacement="both" 
      data-bind="value : rent"> 
      <input/> 
      <input/> 
     </div> 
     <input data-bind="value: rent[0]"/> 
     <input data-bind="value: rent[1]"/> 
    </div> 
</div> 

는 D ifferences는 rent (필요한 어떤 이벤트 핸들러)과 지금 rent[0]rent[1]이다 두 보조 용 input

data-bind 정의는없는 RangeSlider위한

1. data-bind 정의된다. 자바 스크립트에 대해

:

var viewModel = kendo.observable({ 
    rent: [ 323, 600 ] 
}); 
kendo.bind($("#testID"), viewModel); 

는 아무런 설명도 필요 없다! :-)

간단하고 우아하고 그렇게 생각하지 않습니까?