Kendo UI 單頁(yè)面應(yīng)用(四) Layout

單頁(yè)面應(yīng)用(四) Layout

Layout 繼承自 View，可以用來(lái)包含其它的 View 或是 Layout。下面例子使用 Layout 來(lái)顯示一個(gè) View

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

<script>
    var view = new kendo.View("<span>Foo</span>");

    var layout = new kendo.Layout("<header>Header</header><section id='content'></section><footer></footer>");

    layout.render($("#app"));

    layout.showIn("#content", view);
</script>

這個(gè)例子創(chuàng)建一個(gè) Layout 對(duì)象，這個(gè) Layout 含有一個(gè) Header，一個(gè) Content 和一個(gè) footer ,其中 Content以setion 元素定義，作為一個(gè) PlaceHolder， 實(shí)際應(yīng)用時(shí)可以使用某個(gè) View 來(lái)替換。

Layout 本身也是一個(gè) View，因此在 showIn 方法中也可以傳入一個(gè) Layout 對(duì)象，從而實(shí)現(xiàn) Layout 的嵌套支持。

Layout 定義多個(gè) View 統(tǒng)一的布局，定義了 View 的 Placeholder，因此在應(yīng)用中可以實(shí)現(xiàn) View 的切換。例如：

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

<script>
    var foo = new kendo.View("<span>Foo</span>", { hide: function() { console.log("Foo is hidden now"); }});
    var bar = new kendo.View("<span>Bar</span>");

    var layout = new kendo.Layout("<header>Header</header><section id='content'></section><footer></footer>");

    layout.render($("#app"));

    layout.showIn("#content", foo);
    layout.showIn("#content", bar);
</script>

這段代碼首先顯示”foo” ，然后很快切換到顯示 “bar”。 這可以通過(guò)檢查 log 來(lái)確認(rèn)：