Kendo MVVM 和绑定或扩展自定义事件答案

【问题标题】：Kendo MVVM and binding or extending custom eventsKendo MVVM 和绑定或扩展自定义事件
【发布时间】：2013-01-10 21:08:18
【问题描述】：

我的页面中有一个 ComboBox，当客户写下任何字母时，我想将按键事件绑定到我的 Kendo ComboBox。

据我了解，kendo 在 ComboBox 上没有任何按键事件。

我发现剑道有这样的东西来绑定值和函数：

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

来源：Click Here

但问题是我无法解决这个问题并使其触发 KendoComboBox 控件中 InputBox 上的按键事件。

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

提前谢谢你。

【问题讨论】：

标签： mvvm kendo-ui custom-events

【解决方案1】：

这个比我想象的要复杂，但是您可以通过制作一个自定义 MVVM 绑定器来附加到input 元素的keyPress 事件来处理这个问题，如下所示：

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

这是working jsFiddle。

【讨论】：

尊重！谢谢人......虽然我尝试了类似的东西，但我无法完成它。但是你知道吗？他们说完成这项工作的人应该得到所有的荣誉。我必须说，我真的很感谢你在这件事上花费的所有时间。非常感谢！
@Sabox 很高兴我能提供帮助。这对我来说也是一次学习经历。我没有意识到，如果您正在为非小部件制作 MVVM 活页夹，则将其分配给 kendo.data.binders.myBindersName，但要使其与小部件（如 ComboBox）一起使用，您必须将活页夹分配给 kendo.data.binders.widget.myBindersName 一点点细节花了一段时间才弄清楚！
@CodingWithSpike 这太棒了，但我无法让它与自动完成一起工作。有什么想法吗？
我已将其作为问题发布在这里：stackoverflow.com/questions/21508550/…，因为我发现了另一种看起来很有希望的方法......开始。

【解决方案2】：

您可以使用以下代码捕获所有 ComboBox 控件的 keydown 事件：

kendo.ui.ComboBox.fn._keydown = function(e) {
    if (e.which == 13) {
        alert("key pressed!");
    }
};

这也适用于通常不支持按键事件的 DropDownList 小部件。

【讨论】：