码迷,mamicode.com
首页 > 其他好文 > 详细

Kendo MVVM 数据绑定(五) Events

时间:2019-02-11 17:12:26      阅读:179      评论:0      收藏:0      [点我收藏+]

标签:src   tar   target   mode   rom   data-   follow   from   setting   

Kendo MVVM 数据绑定(五) Events

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

<div id="view">
    <span data-bind="events: { mouseover: showDescription, mouseout: hideDescription }">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);
        },
        hideDescription: function (e) {
            // hide the span by setting isDescriptionShown to false
            this.set("isDescriptionShown", false);
        }
    });

    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>

 

Kendo MVVM 数据绑定(五) Events

标签:src   tar   target   mode   rom   data-   follow   from   setting   

原文地址:https://www.cnblogs.com/miaosj/p/10362278.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!