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>

发布评论
IT序号网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

Kendo MVVM 数据绑定(二) Checked知识解答
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。