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

http://wiki.jikexueyuan.com/project/kendo-ui-development-tutorial/images/40.jpg" alt="" />

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”。 這可以通過檢查 log 來確認(rèn)：

http://wiki.jikexueyuan.com/project/kendo-ui-development-tutorial/images/41.jpg" alt="" />