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>
  • 相关阅读:
    5.CSS的引入方式
    4 CSS文本属性
    3.CSS字体属性
    CSS基础选择器总结
    详细介绍jQuery.outerWidth() 函数具体用法
    highcharts x轴中文刻度太长换行
    css 兼容ie8 rgba()用法
    JavaScript常用定义和方法
    12 个 CSS 高级技巧汇总
    javascript 经典问题汇总
  • 原文地址:https://www.cnblogs.com/miaosj/p/10362222.html
Copyright © 2011-2022 走看看