0

我正在尝试将范围滑块与两个文本输入控件绑定。理想情况下，我希望更改范围滑块、文本输入或 viewModel 属性，以直观且同步地更新所有这些控件。但这是我的观察。

  1. 通过拖动拇指更改范围滑块值，更新 viewModel 和输入文本控件值
  2. 在 UI 中编辑输入字段中的文本会更新 viewModel，但不会更新 rangeSlider。
  3. 更改控制台中的范围属性，例如。viewModel.range[0]=-10，不更新文本输入值或范围滑块。
  4. 以编程方式更改范围滑块值 (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>
4

1 回答 1

0

您必须在更新范围方面做更多的工作，因为我认为将值绑定到数组 [0]/[1] 不会真正更新它。

您将需要调用一个函数，该函数将在输入框更改时更新范围值。我继续使用剑道数字文本框，但常规输入框也可以。

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

- 编辑，该示例中的小错误，“未定义”不是未定义的。更新了 jsbin http://jsbin.com/eBOJeceN/4/edit

于 2013-12-10T21:23:43.123 回答