Layout继承自View,可以用来包含其它的View或是Layout。
下面例子使用Layout来显示一个View
4 | var view = new kendo.View("< span >Foo</ span >"); |
6 | var layout = new kendo.Layout("< header >Header</ header >< section id = 'content' ></ section >< footer ></ footer >"); |
8 | layout.render($("#app")); |
10 | layout.showIn("#content", view); |
这个例子创建一个Layout对象,这个Layout含有一个Header,一个Content和一个footer,其中Content以setion元素定义,作为一个PlaceHolder, 实际应用时可以使用某个View来替换。
Layout本身也是一个View,因此在showIn方法中也可以传入一个Layout对象,从而实现Layout的嵌套支持。
Layout定义多个View统一的布局,定义了View的Placeholder,因此在应用中可以实现View的切换。例如:
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 >"); |
7 | var layout = new kendo.Layout("< header >Header</ header >< section id = 'content' ></ section >< footer ></ footer >"); |
9 | layout.render($("#app")); |
11 | layout.showIn("#content", foo); |
12 | layout.showIn("#content", bar); |
这段代码首先显示”foo” ,然后很快切换到显示 “bar”。 这可以通过检查log来确认: