您的位置：首页 > 产品设计 > UI/UE

Kendo UI开发教程(16): Kendo MVVM 数据绑定(五) Events

2014-01-21 09:13 471 查看


本篇和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
>




实际上，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[/code]
 
6
e.preventDefault();
7
}
8
});
9
10
kendo.bind($("a"), viewModel);
11
</
script
>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航