首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

Kendo UI开发课程(16): Kendo MVVM 数据绑定(五) Events

2013-09-07 
Kendo UI开发教程(16): Kendo MVVM 数据绑定(五) Events本篇和Kendo UI开发教程(14): Kendo MVVM 数据绑定

Kendo UI开发教程(16): Kendo MVVM 数据绑定(五) Events

本篇和Kendo UI开发教程(14): Kendo MVVM 数据绑定(三) Click类似,为事件绑定的一般形式。
Events绑定支持将ViewModel的方法绑定到DOM元素的事件处理(如鼠标事件)。
例如:

1<div id="view">2    <span data-bind="events: { mouseover: showDescription, mouseout: hideDescription }">Show description</span>3    <span data-bind="visible: isDescriptionShown, text: description"></span>4</div>5<script>6    var viewModel = kendo.observable({7        description: "Description",8        isDescriptionShown: false,9        showDescription: function (e) {10            // show the span by setting isDescriptionShown to true11            this.set("isDescriptionShown", true);12        },13        hideDescription: function (e) {14            // hide the span by setting isDescriptionShown to false15            this.set("isDescriptionShown", false);16        }17    });18 19    kendo.bind($("#view"), viewModel);20</script>

Kendo UI开发课程(16): Kendo MVVM 数据绑定(五) Events

实际上,click绑定是events绑定的一个特例,下面的两种实现是等效的:

1<span data-bind="click: clickHandler"></span>2 3<span data-bind="events: { click: clickHandler }"></span>

注: Kendo MVVM的 DOM 事件参数 e封装在jQuery 的Event对象中。

中止事件向上传递

如果需要终止事件向上传递(event bubbling),可以调用stopPropagation方法。

1<span data-bind="click: click">Click</span>2<script>3var viewModel = kendo.observable({4    click: function(e) {5        e.stopPropagation();6    }7});8 9kendo.bind($("span"), viewModel);10</script>

停止事件缺省处理

如果要取消某些DOM元素单击后的缺省处理函数,比如转到其它页面或是提交表单,为了取消这些缺省实际处理,可以调用preventDefault()方法。例如:

1<a href="http://example.com" data-bind="click: click">Click</span>2<script>3var viewModel = kendo.observable({4    click: function(e) {5        // stop the browser from navigating to http://example.com6        e.preventDefault();7    }8});9 10kendo.bind($("a"), viewModel);11</script> 

热点排行