zoukankan      html  css  js  c++  java
  • Kendo MVVM 数据绑定(五) Events

    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>
  • 相关阅读:
    OCS 2007 R2单机测试虚拟环境的搭建(windows server 2008 R2 x64)
    Linq的概念解析
    WCF Data Service与net.tcp承载分析
    codeplex上20个有意思的WPF程序
    各种SmartPhone上的跨平台开源框架的总结
    新开发Apple Store上软件的实施步骤
    VSTO应用程序中加入键盘钩子
    绝非偶然 苹果iPhone领先5年背后的迷思 【推荐】
    Windows上安装Mac OS虚拟机
    Visual Studio 远程调试的步骤
  • 原文地址:https://www.cnblogs.com/miaosj/p/10362278.html
Copyright © 2011-2022 走看看