Kendo UI 單頁面應用(四) Layout

Layout 繼承自 View，可以用來包含其它的 View 或是 Layout。下面例子使用 Layout 來顯示一個 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>

這個例子創建一個 Layout 對象，這個 Layout 含有一個 Header，一個 Content 和一個 footer ,其中 Content以setion 元素定義，作為一個 PlaceHolder， 實際應用時可以使用某個 View 來替換。

Layout 本身也是一個 View，因此在 showIn 方法中也可以傳入一個 Layout 對象，從而實現 Layout 的嵌套支持。

Layout 定義多個 View 統一的布局，定義了 View 的 Placeholder，因此在應用中可以實現 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”。 這可以通過檢查 log 來確認：

Kendo UI 單頁面應用(四) Layout