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

最新推荐文章于 2024-01-03 14:29:35 发布

原创最新推荐文章于 2024-01-03 14:29:35 发布 · 4.2k 阅读

0 ·

CC 4.0 BY-SA版权

教程同时被 3 个专栏收录

666 篇文章

订阅专栏

Kendo

27 篇文章

订阅专栏

Kendo 开发教程

27 篇文章

订阅专栏

本文详细介绍了Kendo MVVM中的click绑定机制，包括如何将ViewModel定义的方法绑定到DOM的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>

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

    6        e.preventDefault();

    7    }

    8});

    9 

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

    11</script>