zoukankan      html  css  js  c++  java
  • Kendo UI开发教程(16): Kendo MVVM 数据绑定(五) Events

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

    1 <div id="view">
    2     <span data-bind="events: { mouseover: showDescription, mouseout: hideDescription }">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         hideDescription: function (e) {
    14             // hide the span by setting isDescriptionShown to false
    15             this.set("isDescriptionShown", false);
    16         }
    17     });
    18  
    19     kendo.bind($("#view"), viewModel);
    20 </script>

    20130817004

    实际上,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>
     
  • 相关阅读:
    Intellij IDEA Java web 项目搭建
    Spring的AOP原理
    为何有DAO与Service层?为何先搞Dao接口在搞DaoImpl实现?直接用不行吗?
    DAO层,Service层,Controller层、View层协同工作机制
    浅谈service、DAO层引入(转)
    java书籍推荐转
    Java点滴-List<Integer> list; 中尖括号的意思
    Composer更新慢的终极解决方案-转
    laravel门面DB返回数组配置
    laravel构建联合查询
  • 原文地址:https://www.cnblogs.com/riskyer/p/3295257.html
Copyright © 2011-2022 走看看