user-interface - 剑道滑块更改事件参数未定义

Question

我在一个页面上有多个剑道滑块。当滑块的值发生变化时，我想确定是哪个滑块触发了更改事件，以便我可以根据所选值更改其颜色。

<div id="div_slider">
    <input id="slider1" data-bind="kendoSlider: { value: myValue, min: 0, max: 5,change: changeSlider }" />
    <input id="slider2" data-bind="kendoSlider: { value: myValue,  min: 0, max: 5,change: changeSlider }" />
    <input id="slider3" data-bind="kendoSlider: { value: myValue,  min: 0, max: 5,change: changeSlider }" />
</div>

我的淘汰赛绑定如下

<script type="text/javascript">

    var ViewModel = function () {
        this.myValue = 5;

        this.changeSlider = function(data, event) {
            console.log(data);
            console.log(event);
        };
    };

    ko.applyBindings(new ViewModel());
</script>

问题是滑块更改函数的事件参数始终未定义。有谁知道为什么？

Answer 1

我想通了，必须使用'this'来获取元素ID。下面的代码：（根据 Pechka 的建议更新了代码以使用包装器）

 this.changeSlider = function (data, event) {

        if (data.value === 1) {
            this.wrapper.find('.k-slider-selection').css('background-color', 'red');
        } else if (data.value === 2) {
            this.wrapper.find('.k-slider-selection').css('background-color', 'orange');
        } else if (data.value === 3) {
            this.wrapper.find('.k-slider-selection').css('background-color', 'yellow');
        } else if (data.value === 4) {
            this.wrapper.find('.k-slider-selection').css('background-color', 'green');
        } else if (data.value === 5) {
            this.wrapper.find('.k-slider-selection').css('background-color', 'blue');
        }    
 };

Answer 2

您可以通过小部件的wrapper字段访问包装的 html 元素，这是处理程序函数中的 this。

例如

this.changeSlider = function(){
   this.wrapper.find('.k-slider-selection').css('background-color', 'red');
}