本篇和 Kendo UI 開發(fā)教程(14): Kendo MVVM 數(shù)據(jù)綁定(三) Click 類似,為事件綁定的一般形式。Events 綁定支持將 ViewModel 的方法綁定到 DOM 元素的事件處理(如鼠標事件)。例如:
<div id="view">
<span data-bind="events: { mouseover: showDescription, mouseout: hideDescription }">Show description</span>
<span data-bind="visible: isDescriptionShown, text: description"></span>
</div>
<script>
var viewModel = kendo.observable({
description: "Description",
isDescriptionShown: false,
showDescription: function (e) {
// show the span by setting isDescriptionShown to true
this.set("isDescriptionShown", true);
},
hideDescription: function (e) {
// hide the span by setting isDescriptionShown to false
this.set("isDescriptionShown", false);
}
});
kendo.bind($("#view"), viewModel);
</script>
實際上,click 綁定是 events 綁定的一個特例,下面的兩種實現(xiàn)是等效的:
<span data-bind="click: clickHandler"></span>
<span data-bind="events: { click: clickHandler }"></span>
注: Kendo MVVM 的 DOM 事件參數(shù) e 封裝在 jQuery 的 Event 對象中。
如果需要終止事件向上傳遞(event bubbling),可以調(diào)用 stopPropagation 方法。
<span data-bind="click: click">Click</span>
<script>
var viewModel = kendo.observable({
click: function(e) {
e.stopPropagation();
}
});
kendo.bind($("span"), viewModel);
</script>
如果要取消某些 DOM 元素單擊后的缺省處理函數(shù),比如轉(zhuǎn)到其它頁面或是提交表單,為了取消這些缺省實際處理,可以調(diào)用 preventDefault() 方法。例如:
<a href="http://example.com" data-bind="click: click">Click</span>
<script>
var viewModel = kendo.observable({
click: function(e) {
// stop the browser from navigating to http://example.com
e.preventDefault();
}
});
kendo.bind($("a"), viewModel);
</script>
更多建議: