DevExtreme教程：布局设置详解

布局包括视图相同的组件 （标记、 隐藏的代码和样式表），区别在于布局包含呈现视图内容的占位符，当使用布局的应用程序需要显示一个视图时，它的内容会都合并到布局，并显示得到的标记。占位符可以有关联的视觉过渡效果，主要是在视图更改的时候使用，使得布局达到以下的效果，今天就来看一下 DevExtreme 布局设置的使用教程：

1、布局允许你布局允许您一次写入共同标记 （类似于在 ASP.NET 的一个主页）。不需要重复的为每个视图使用相同的标记。

2、布局帮助你的应用程序实现真正的跨平台，一个视图主要是由针对不同布局的占位符的标记组成。这些块的可视化主要是由一个特定的布局来决定的，因此，你可以使用多个布局，来为一个单一的视图实现在不同设备上拥有本机的外观和感觉。

创建一个布局,将其用一个div元素标记，设置元素的data-dx-role属性来布局，同时通过设置data-dx-name属性来设置布局的名称。

<div data-dx-role="layout" data-dx-name="myLayout"> 
</div>

你也可以通过应用程序的视图来设置使用默认的布局，设置defaulLayout产权配置对象递给构造函数的HtmlApplication布局的名字。

myApp = new DevExpress.framework.html.HtmlApplication({ 
  defaultLayout: "myLayout"
   //... 
});

应用到一个特定的视图布局，设置在在根上的div 视图元素的data-dx-layout属性到布局名称。

<div data-dx-role="view" data-dx-name="index" data-dx-layout="myLayout"> 
    <h1 data-bind="text: message"></h1> 
</div>

为了声明占位符，创建一个div元素，同时设置它的data-dx-placeholder属性到一个占位符的名字上。

<div data-dx-role="layout" data-dx-name="myLayout"> 
    <div data-dx-placeholder="content"></div> 
</div>

如果要使用一个占位符，必须通过div元素的占位符显示视图标记。设置元素的data-dx-target-placeholder属性到占位符名称上。

<div data-dx-role="view" data-dx-name="index" data-dx-layout="myLayout">

   <div data-dx-target-placeholder="content">

      <h1 data-bind="text: message"></h1>

   </div>

</div>

以视觉过渡效果关联一个占位符，设置占位符的div元素的data-dx-transition属性为下滑，褪色或溢出。

<div data-dx-role="layout" data-dx-name="myLayout"> 
   <div data-dx-placeholder="content" data-dx-transition="slide"></div> 
</div>

需要注意的是布局标记可以包含占位符数据用于绑定ViewModel。

<div data-dx-role="layout" data-dx-name="myLayout"> 
    <h1 data-bind="text: message"></h1> 
    <div data-dx-placeholder="content" data-dx-transition="slide"></div>
</div>

>>DevExtreme下载