Kendo UI 單頁(yè)面應(yīng)用(一)概述

單頁(yè)面應(yīng)用(一)概述

Kendo 單頁(yè)面應(yīng)用(Single-Page Application,縮寫(xiě)為 SPA）定義了一組類用于簡(jiǎn)化 Web 應(yīng)用（Rich Client）開(kāi)發(fā)，最常見(jiàn)的單頁(yè)面應(yīng)用為 Gmail 應(yīng)用，使用單頁(yè)面可以給用戶有使用桌面應(yīng)用的用戶體驗(yàn)。Kendo 的 Route 類負(fù)責(zé)跟蹤應(yīng)用的當(dāng)前狀態(tài)和支持在應(yīng)用的不同狀態(tài)之間切換。 Route 通過(guò) Url 的片段功能（#url)和流量器的瀏覽歷史功能融合在一起。從而可以支持把應(yīng)用的某個(gè)狀態(tài)作為書(shū)簽添加到瀏覽器中。Route 也支持通過(guò)代碼在應(yīng)用的不同狀態(tài)之間切換。View 和 Layout 類用于 UI 的顯示。 UI 事件和數(shù)據(jù)綁定可以通過(guò) MVVM 或 data 初始化屬性來(lái)完成。下面為一個(gè)最簡(jiǎn)單的 SPA 應(yīng)用框架。

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

<script id="index" type="text/x-kendo-template">
    Hello <span data-bind="text: foo"></span>
</script>

<script>
    var index = new kendo.View(
        "index", // the id of the script element that contains the view markup
        { model: kendo.observable({ foo: "World!" }) }
    );

    var router = new kendo.Router();

    router.route("/", function() {
        index.render("#app");
    });

    $(function() {
        router.start();
    });
</script>

運(yùn)行這個(gè)應(yīng)用，顯示“Hello，World”。