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

單頁面應(yīng)用(四) 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>

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

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

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