分類  >  Web前端 >

Kendo UI開發課程(25): 單頁面應用(三) View

tags:    時間:2013-12-10 00:15:43
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>
 

推薦閱讀文章

Bookmark the permalink ,來源:互聯網