Kendo MVVM 和绑定或扩展自定义事件
Posted
技术标签:
【中文标题】Kendo MVVM 和绑定或扩展自定义事件【英文标题】:Kendo MVVM and binding or extending custom events 【发布时间】: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 框架中添加一些东西。
提前谢谢你。
【问题讨论】:
【参考方案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 这太棒了,但我无法让它与自动完成一起工作。有什么想法吗?
我已将其作为问题发布在这里:***.com/questions/21508550/…,因为我发现了另一种看起来很有希望的方法......开始。【参考方案2】:
您可以使用以下代码捕获所有 ComboBox 控件的 keydown 事件:
kendo.ui.ComboBox.fn._keydown = function(e)
if (e.which == 13)
alert("key pressed!");
;
这也适用于通常不支持按键事件的 DropDownList 小部件。
【讨论】:
以上是关于Kendo MVVM 和绑定或扩展自定义事件的主要内容,如果未能解决你的问题,请参考以下文章