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

    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>
  • 相关阅读:
    js备忘录3
    js备忘录2
    js备忘录1
    Java-URLEncoder.encode 什么时候才是必须的
    Oracle中的SQL分页查询原理和方法详解
    servlet 和 threadlocal 与 web容器(理解threadlocal)
    技术汇总:第十二章:技术总览
    MongoDB :第五章:MongoDB 插入更新删除查询文档
    MongoDB :第六章:Java程序操作MongoDB
    MongoDB :第二章:系统归纳
  • 原文地址:https://www.cnblogs.com/miaosj/p/10362222.html
Copyright © 2011-2022 走看看