Contents
Click绑定可以把由ViewModel定义的方法不绑定到目标DOM的click事件。当点击目标DOM元素时触发ViewModel的对应方法。
例如:
<div id="view"> <span data-bind="click: showDescription">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); } }); kendo.bind($("#view"), viewModel); </script>
实际上,click绑定是events绑定的一个特例,下面的两种实现是等效的:
<span data-bind="click: clickHandler"></span> <span data-bind="events: { click: clickHandler }"></span>
注: Kendo MVVM的 DOM 事件参数 e封装在jQuery 的Event对象中。
如果需要终止事件向上传递(event bubbling),可以调用stopPropagation方法。
<span data-bind="click: click">Click</span> <script> var viewModel = kendo.observable({ click: function(e) { e.stopPropagation(); } }); kendo.bind($("span"), viewModel); </script>
如果要取消某些DOM元素单击后的缺省处理函数,比如转到其它页面或是提交表单,为了取消这些缺省实际处理,可以调用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>