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

Kendo UI开发教程(14): Kendo MVVM 数据绑定(三) Click

2013-08-25 20:07 429 查看
Click绑定可以把由ViewModel定义的方法不绑定到目标DOM的click事件。当点击目标DOM元素时触发ViewModel的对应方法。
例如：

使用Click绑定

1
<
div
id
=
"view"
>
2
<
span
 
data-bind
=
"click: showDescription"
>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
});
14
15
kendo.bind($("#view"), viewModel);
16
</
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
6
e.preventDefault();
7
}
8
});
9
10
kendo.bind($("a"), viewModel);
11
</
script
>

                                            

                                        

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

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航