綁定劍道UI rangeSlider與其他控件

我想綁定範圍滑塊與兩個文本輸入控件。理想情況下，我希望在範圍滑塊，文本輸入或viewModel屬性中進行更改，以便可視化地同步更新所有這些控件。但這是我的觀察。綁定劍道UI rangeSlider與其他控件

通過拖動滑塊更改範圍滑塊值，更新視圖模型和輸入文本控制值
編輯在UI中輸入字段中的文本更新視圖模型，但不更新rangeSlider。
在控制檯中更改範圍屬性例如。 viewModel.range [0] = - 10，不更新文本輸入值或範圍滑塊。
以編程方式更改範圍滑塊值（slider.value（[ - 7。10]））不會更新viewModel或輸入文本。

下面是代碼：

的Javascript

<script type="text/javascript"> 
var viewModel = kendo.observable({ 
    range: [-7, 3] 
}); 
$(document).ready(function() { 
     var slider = $("#slider").kendoRangeSlider({ 
      min: -10, 
      max: 10 
     }); 

     kendo.bind($(".QFContent"), viewModel); 
}); 
</script>

HTML

<div class='QFContent'> 
    <div class='QFReadout QFLowerBound tab-ctrl-formatted-border-hover'> 
    <div class='QFReadout QFLowerBound tab-ctrl-formatted-border-hover'> 
     <span class='readoutText tab-ctrl-formatted-fixedsize'></span> 
    <input data-bind="value: range[0]" data-value-update="keyup" type='text'></input> 
</div> 
<div class='QFReadout QFUpperBound tab-ctrl-formatted-border-hover'> 
<span class='readoutText tab-ctrl-formatted-fixedsize'></span> 
<input data-bind="value: range[1]" data-value-update="keyup" type='text'></input> 
</div> 
    <div id="slider" class='QFSlider QFBar' data-bind="value : range"> 
    <input></input> 
    <input></input> 
</div> 
</div>

來源

2013-12-10 Amit Sharma

你必須做更多的工作與更新的範圍，因爲我不認爲結合數組[0]/[1]的值將實際更新它。

您將需要調用一個函數，以便在輸入框更改時更新範圍值。我繼續使用kendo的numerictextboxes，但常規的輸入框也可以。

http://jsbin.com/eBOJeceN/2/edit

- 編輯，即樣本中的小蟲子，「不確定」是不是不確定的。更新jsbin http://jsbin.com/eBOJeceN/4/edit

來源

2013-12-10 21:23:43

綁定劍道UI rangeSlider與其他控件

回答

相關問題