Kendo UI开发教程(14): Kendo MVVM 数据绑定(三) Click

Click绑定可以把由ViewModel定义的方法不绑定到目标DOM的click事件。当点击目标DOM元素时触发ViewModel的对应方法。
例如：

使用Click绑定

<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>