如何绑定值和事件kendo滑块和kendo可观察类

Question

我试图将输入框绑定到kendo滑块，这是怎么引导我的。如果你有更好的方法来实现这样的要求，请分享。感谢。

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>

差异是

1. data-bind RangeSlider的定义rent（无需事件处理程序）
现在为data-bind和input的两个辅助rent[0]的
2. rent[1]定义。

关于JavaScript：

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

无需解释！ ： - ）

简单而优雅，不这么认为吗？