Kendo UI开发教程(25): 单页面应用(三) View
转载
View为屏幕上某个可视部分,可以处理用户事件。 View可以通过HTML创建或是通过script元素。缺省情况下View将其所包含的内容封装在一个Div元素中。
Kendo创建View有两种方式:
使用HTML 字符串创建View
2 |
var index = new kendo.View('< span >Hello World!</ span >');
|
或是使用
使用Script模板创建View
1 |
< script id = "index" type = "text/x-kendo-template" >
|
2 |
< span >Hello World!</ span >
|
6 |
var index = new kendo.View('index');
|
显示View内容
使用上述两种方法创建View,可以使用view的render方法来显示,render参数支持jQuery选择器,表示将View的内容显示到指定的DOM元素中或添加到指定的DOM元素。
例如:显示View
4 |
var index = new kendo.View('< span >Hello World!</ span >');
|
本例将View的内容显示到div元素中,如果需要向某个DOM元素中添加View的内容,可以使用append方法。例如:
4 |
var index = new kendo.View('< span >Hello World!</ span >');
|
6 |
$("#app").append(index.render());
|
集成MVVM
在创建View时,可以传入一个model对象,此时model可以和创建的view绑定。例如:
2 |
< script id = "index" type = "text/x-kendo-template" >
|
3 |
< div >Hello < span data-bind = "text:foo" ></ span >!</ div >
|
7 |
var model = kendo.observable({ foo: "World" });
|
8 |
var index = new kendo.View('index', { model: model });
|
本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。