Kendo MVVM以及绑定或扩展自定义事件

Question

我的页面中有一个ComboBox,当cliend写下任何字母时,我想将keypress事件绑定到我的Kendo ComboBox.

据我所知,kendo在ComboBox上没有任何按键事件.

我发现kendo有这样的东西绑定值和函数:

kendo.data.binders.slide = kendo.data.Binder.extend({
        refresh: function () {
            var value = this.bindings["slide"].get();

            if (value) {
                $(this.element).slideDown();
            } else {
                $(this.element).slideUp();
            }
        }
    });

来源:点击这里

但问题是我无法解决这个问题,并让它在KendoComboBox控件的InputBox上触发keypress事件.

请记住,我正在使用MVVM,我不想使用像$('k-input')这样的东西.keypress(...); 我想通过操纵kendo为我们提供的extend方法在ken​​do框架中添加一些东西.

先感谢您.

Answer 1

这个比我想象的要复杂得多,但你可以通过将一个自定义的MVVM绑定器附加到元素的keyPress事件来处理这个问题input,如下所示:

kendo.data.binders.widget.keyPress = kendo.data.Binder.extend({
    init: function (element, bindings, options) {
        kendo.data.Binder.fn.init.call(this, element, bindings, options);
        var binding = this.bindings.keyPress;
        $(element.input).bind("keypress", function(){binding.get();});
    },
    refresh: function () {}
});

您可以将其绑定到视图模型上的函数.

<input data-role="combobox"
    data-text-field="text"
    data-value-field="value"
    data-bind="keyPress: onKeyPress, source: data"></input>


var viewModel = kendo.observable({
    data: [
        {text: "One", value: 1},
        {text: "Two", value: 2}
    ],
    onKeyPress: function () {
        $("#output").append("<div>keyPress</div>");
    }
});

这是一个有效的jsFiddle.