Kendo UI开发教程(25): 单页面应用(三) View
View为屏幕上某个可视部分,可以处理用户事件。 View可以通过HTML创建或是通过script元素。缺省情况下View将其所包含的内容封装在一个Div元素中。
Kendo创建View有两种方式:
1
<
script
>
2
var index = new kendo.View('<
span
>Hello World!</
span
>');
3
</
script
>
或是使用
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的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
>
在创建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
>