Kendo UI 單頁(yè)面應(yīng)用(三) View

單頁(yè)面應(yīng)用(三) View

iew 為屏幕上某個(gè)可視部分，可以處理用戶事件。 View 可以通過(guò) HTML 創(chuàng)建或是通過(guò) script 元素。缺省情況下 View 將其所包含的內(nèi)容封裝在一個(gè) Div 元素中。Kendo 創(chuàng)建 View 有兩種方式：

使用 HTML 字符串創(chuàng)建 View

<script>
    var index = new kendo.View('<span>Hello World!</span>');
</script>

或是使用

使用 Script 模板創(chuàng)建 View

<script id="index" type="text/x-kendo-template">
    <span>Hello World!</span>
</script>

<script>
    var index = new kendo.View('index');
</script>

顯示 View 內(nèi)容

使用上述兩種方法創(chuàng)建 View，可以使用 view 的 render 方法來(lái)顯示, render 參數(shù)支持 jQuery 選擇器，表示將 View 的內(nèi)容顯示到指定的DOM 元素中或添加到指定的 DOM 元素。例如：顯示 View

<div id="app"></div>

<script>
    var index = new kendo.View('<span>Hello World!</span>');

    index.render("#app");
</script>

本例將 View 的內(nèi)容顯示到 div 元素中，如果需要向某個(gè) DOM 元素中添加 View 的內(nèi)容，可以使用 append 方法。例如：

<div id="app"></div>

<script>
    var index = new kendo.View('<span>Hello World!</span>');

    $("#app").append(index.render());
</script>

集成 MVVM

在創(chuàng)建 View 時(shí)，可以傳入一個(gè) model 對(duì)象，此時(shí) model 可以和創(chuàng)建的 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>