Kendo UI开发教程(25): 单页面应用(三) View

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>`

转载于:https://www.cnblogs.com/pangblog/p/3313149.html

Kendo UI开发教程(25): 单页面应用(三) View相关推荐

Kendo UI开发教程(23): 单页面应用(一)概述
Kendo单页面应用(Single-Page Application,缩写为SPA)定义了一组类用于简化Web应用(Rich Client)开发,最常见的单页面应用为Gmail应用,使用单页面可以给用 ...
Kendo UI开发教程(9): Kendo UI Validator 概述
Kendo UI Validator 支持了客户端校验的便捷方法,它基于HTML 5 的表单校验功能,支持很多内置的校验规则,同时也提供了自定义规则的便捷方法. 完整的Kendo UI 的Valida ...
Kendo UI开发教程 2 准备Kendo UI开发环境
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 首先你需 ...
Kendo UI开发教程(8): Kendo UI 特效概述
Kendo UI Fx 提供了一个丰富,可扩展,性能经过优化的工具集合用来完成HTML元素的过渡显示.每种特效近可能的使用CSS Transition ,对于一些老版本浏览器使用修改属性的方法作为补充 ...
Kendo UI开发教程：Kendo UI模板概述
2019独角兽企业重金招聘Python工程师标准>>> Kendo UI框架提供了一个易用,高性能的JavaScript模板引擎.通过模板可以创建一个HTML片段然后可以和JavaS ...
Kendo UI Web教程分享
2019独角兽企业重金招聘Python工程师标准>>> Kendo UI Web是著名软件开发商Telerik的产品,包含数百个创建HTML5 web app的必备元素,包括UI组件 ...
Kendo UI Web教程大全
HTML5 Web app开发工具Kendo UI Web教程:颜色拾取器的使用 HTML5 Web app开发工具Kendo UI Web教程:AutoComplete功能解析 HTML5 Web ...
Kendo UI Web 教程大全
http://blog.csdn.net/BTfan123/article/details/22928019 HTML5 Web app开发工具Kendo UI Web教程:颜色拾取器的使用 HTML ...
Kendo UI Web教程系列
Kendo UI Web是著名软件开发商Telerik的产品,包含数百个创建HTML5 web app的必备元素,包括UI组件.数据源.验证.一个MVVM框架.主题.模板等. 下面盘点了Kendo U ...