data-binding - 剣道 UI の rangeSlider を他のコントロールにバインドする

Question

レンジ スライダーを 2 つのテキスト入力コントロールにバインドしようとしています。理想的には、範囲スライダー、テキスト入力、または 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>