Kendo UI 數(shù)據(jù)綁定(三) Click

Kendo MVVM 數(shù)據(jù)綁定(三) Click

Click 綁定可以把由 ViewModel 定義的方法不綁定到目標(biāo) DOM 的 click 事件。當(dāng)點(diǎn)擊目標(biāo) DOM 元素時(shí)觸發(fā) ViewModel 的對(duì)應(yīng)方法。例如：

使用 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>

實(shí)際上，click 綁定是 events 綁定的一個(gè)特例，下面的兩種實(shí)現(xiàn)是等效的：

<span data-bind="click: clickHandler"></span>

<span data-bind="events: { click: clickHandler }"></span>

注： Kendo MVVM 的 DOM 事件參數(shù) e 封裝在 jQuery 的 Event 對(duì)象中。

中止事件向上傳遞

如果需要終止事件向上傳遞(event bubbling)，可以調(diào)用 stopPropagation 方法。

<span data-bind="click: click">Click</span>
<script>
var viewModel = kendo.observable({
    click: function(e) {
        e.stopPropagation();
    }
});

kendo.bind($("span"), viewModel);
</script>

停止事件缺省處理

如果要取消某些 DOM 元素單擊后的缺省處理函數(shù)，比如轉(zhuǎn)到其它頁(yè)面或是提交表單，為了取消這些缺省實(shí)際處理，可以調(diào)用 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>