Kendo UI开发教程(25): 单页面应用(三) View
来源:互联网 发布:it桔子数据 编辑:程序博客网 时间:2024/05/21 12:08
View为屏幕上某个可视部分,可以处理用户事件。 View可以通过HTML创建或是通过script元素。缺省情况下View将其所包含的内容封装在一个Div元素中。
Kendo创建View有两种方式:
使用HTML 字符串创建View
1
<
script
>
2
var index = new kendo.View('<
span
>Hello World!</
span
>');
3
</
script
>
或是使用
使用Script模板创建View
1
<
script
id
=
"index"
type
=
"text/x-kendo-template"
>
2
<
span
>Hello World!</
span
>
3
</
script
>
4
5
<
script
>
6
var index = new kendo.View('index');
7
</
script
>
显示View内容
使用上述两种方法创建View,可以使用view的render方法来显示,render参数支持jQuery选择器,表示将View的内容显示到指定的DOM元素中或添加到指定的DOM元素。
例如:显示View
1
<
div
id
=
"app"
></
div
>
2
3
<
script
>
4
var index = new kendo.View('<
span
>Hello World!</
span
>');
5
6
index.render("#app");
7
</
script
>
本例将View的内容显示到div元素中,如果需要向某个DOM元素中添加View的内容,可以使用append方法。例如:
1
<
div
id
=
"app"
></
div
>
2
3
<
script
>
4
var index = new kendo.View('<
span
>Hello World!</
span
>');
5
6
$("#app").append(index.render());
7
</
script
>
集成MVVM
在创建View时,可以传入一个model对象,此时model可以和创建的view绑定。例如:
1
<
div
id
=
"app"
></
div
>
2
<
script
id
=
"index"
type
=
"text/x-kendo-template"
>
3
<
div
>Hello <
span
data-bind
=
"text:foo"
></
span
>!</
div
>
4
</
script
>
5
6
<
script
>
7
var model = kendo.observable({ foo: "World" });
8
var index = new kendo.View('index', { model: model });
9
index.render("#app");
10
</
script
>
- Kendo UI开发教程(25): 单页面应用(三) View
- Kendo UI开发教程(25): 单页面应用(三) View
- Kendo UI开发教程(23): 单页面应用(一)概述
- Kendo UI开发教程(26): 单页面应用(四) Layout
- Kendo UI开发教程(23): 单页面应用(一)概述
- Kendo UI开发教程(26): 单页面应用(四) Layout
- Kendo UI开发教程(24): 单页面应用(二) Router 类
- Kendo UI开发教程(24): 单页面应用(二) Router 类
- Kendo UI开发教程:Kendo DataSource概述
- Kendo UI开发教程(27): 移动应用开发简介
- Kendo UI开发教程(27): 移动应用开发简介
- Kendo UI开发教程(14): Kendo MVVM 数据绑定(三) Click
- Kendo UI开发教程(14): Kendo MVVM 数据绑定(三) Click
- Kendo UI开发教程(2):准备Kendo UI开发环境
- Kendo UI开发教程(2):准备Kendo UI开发环境
- Kendo UI开发教程(2):准备Kendo UI开发环境
- Kendo UI单页面程序中文文档
- Kendo UI单页面程序中文文档
- python 批量改文件名称
- Kendo UI开发教程(23): 单页面应用(一)概述
- Exercises4.2E2(a)4.3E2
- Kendo UI开发教程(24): 单页面应用(二) Router 类
- 如何做网络投票的刷票外挂(二)
- Kendo UI开发教程(25): 单页面应用(三) View
- 驱动下如何获取硬盘序列号
- Kendo UI开发教程(26): 单页面应用(四) Layout
- YT工作日志-0909
- windows查看端口占用命令
- Android Power Management
- 微软面试100道之7 判断俩个链表是否相交
- SVN的使用记录
- Kendo UI开发教程(27): 移动应用开发简介