View为屏幕上某个可视部分,可以处理用户事件。 View可以通过HTML创建或是通过script元素。缺省情况下View将其所包含的内容封装在一个Div元素中。
Kendo创建View有两种方式:
<script> var index = new kendo.View('<span>Hello World!</span>'); </script>
或是使用
<script id="index" type="text/x-kendo-template"> <span>Hello World!</span> </script> <script> var index = new kendo.View('index'); </script>
使用上述两种方法创建View,可以使用view的render方法来显示,render参数支持jQuery选择器,表示将View的内容显示到指定的DOM元素中或添加到指定的DOM元素。
例如:显示View
<div id="app"></div> <script> var index = new kendo.View('<span>Hello World!</span>'); index.render("#app"); </script>
将View的内容显示到div元素中,如果需要向某个DOM元素中添加View的内容,可以使用append方法。例如:
<div id="app"></div> <script> var index = new kendo.View('<span>Hello World!</span>'); $("#app").append(index.render()); </script>
在创建View时,可以传入一个model对象,此时model可以和创建的view绑定。例如:
<div id="app"></div> <script id="index" type="text/x-kendo-template"> <div>Hello <span data-bind="text:foo"></span>!</div> </script> <script> var model = kendo.observable({ foo: "World" }); var index = new kendo.View('index', { model: model }); index.render("#app"); </script>