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

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

使用Click绑定

1	<div id="view">

2	<span data-bind="click: showDescription">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 true

11	this.set("isDescriptionShown", true);

12

}

13

});

14

15	kendo.bind($("#view"), viewModel);

16

</script>

实际上，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>

3	var viewModel = kendo.observable({

4	click: function(e) {

5	e.stopPropagation();

6

}

7

});

8

9	kendo.bind($("span"), viewModel);

10

</script>

停止事件缺省处理

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

1	<a href="http://example.com" data-bind="click: click">Click</span>

2

<script>

3	var viewModel = kendo.observable({

4	click: function(e) {

5	// stop the browser from navigating to http://example.com

6	e.preventDefault();

7

}

8

});

9

10	kendo.bind($("a"), viewModel);

11

</script>