Kendo UI开发教程(26): 单页面应用(四) Layout

Layout继承自View，可以用来包含其它的View或是Layout。
下面例子使用Layout来显示一个View

1 <div id="app"></div>
2
3 <script>
4     var view = new kendo.View("<span>Foo</span>");
5
6     var layout = new kendo.Layout("<header>Header</header><sectionid='content'></section><footer></footer>");
7
8     layout.render($("#app"));
9
10     layout.showIn("#content", view);
11 </script>

这个例子创建一个Layout对象，这个Layout含有一个Header，一个Content和一个footer,其中Content以setion元素定义，作为一个PlaceHolder， 实际应用时可以使用某个View来替换。

Layout本身也是一个View，因此在showIn方法中也可以传入一个Layout对象，从而实现Layout的嵌套支持。

Layout定义多个View统一的布局，定义了View的Placeholder，因此在应用中可以实现View的切换。例如：

1 <div id="app"></div>
2
3 <script>
4     var foo = new kendo.View("<span>Foo</span>", { hide: function() { console.log("Foo is hidden now"); }});
5     var bar = new kendo.View("<span>Bar</span>");
6
7     var layout = new kendo.Layout("<header>Header</header><sectionid='content'></section><footer></footer>");
8
9     layout.render($("#app"));
10
11     layout.showIn("#content", foo);
12     layout.showIn("#content", bar);
13 </script>

这段代码首先显示”foo” ，然后很快切换到显示 “bar”。 这可以通过检查log来确认：