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>