model - 如何绑定值和事件剑道滑块和剑道可观察类

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">
            <input/>
            <input/>
        </div>
        <input data-bind="value: rent[0]"/>
        <input data-bind="value: rent[1]"/>
    </div>
</div>

区别是

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

关于 JavaScript：

var viewModel = kendo.observable({
    rent: [ 323, 600 ]
});
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, events:{change: rentOnChange}">
            <input />
            <input />
        </div>
        <input data-bind="value: rentMin, events:{change: rentOnChange}" />
        <input data-bind="value: rentMax, events:{change: rentOnChange}" />
    </div>
</div>

---

脚本

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);