DevExtreme教程：命令详解

    命令主要是关联当前视图的一个抽象操作，帮助生产出真正有着本地化外观和风格的跨平台应用程序，来看一下 DevExtreme 中的命令。

    来看一个例子，假设您有一个视图，在为iPhone设计的应用程序中包含“搜索”和“添加”按钮。“搜索”按钮位于标题栏的左侧，“添加”按钮位于标题栏的右侧。如果说你想要在android 手机上使用这个应用程序，或者是在底部的导航栏上显示“添加”按钮，同时，由于这款手机有内置硬件的“搜索”按钮，你不想在屏幕上显示“搜索”按钮。因此，在 iOS 设备上，您需要两个工具栏项目，同时在Android设备上你也需要一个单独的导航栏项目。你不仅需要两个不同的布局，还需要创建管理在这些平台上的不同的组件。

    代替在不同平台上的手动的管理，你可以为视图定义两个命令，现在你有一个单一的视图，可以同时在iPhone 和 Android 设备上正常工作，并且提供本机的用户体验。

    若要声明一个命令，创建一个空的 div 元素。将该元素的data-dx-role设置为命令，并使用 dxCommand KnockoutJS 绑定到下面指定的命令选项。

Action

当命令执行的时候，调用ViewModel function的名字。

Location

布局位置，用于控制命令的可用性和位置。

Title

命令标题。

<div data-dx-role="view" data-dx-name="details">
 <div data-dx-role="command" 
    data-bind="dxCommand: { action: add, location: 'create', title: 'Add' } "></div>
 <div data-dx-role="command" 
    data-bind="dxCommand: { action: search, location: 'back', title: 'Search' } "></div> 
</div>

    为了可以正常的工作，代码片段包含了在ViewModel 中出现的“搜索”和“添加”功能。此外这个视图显示在定义了“Back” 和“Add”位置的布局上，Navbar内置布局就是一个这种布局的例子：

    要在在自定义布局中支持命令，需要在布局中声明 dxList、 dxNavBar 或 dxToolbar组件。设置组件的data-dx-command-container属性值到一个位置列表再映射到组件，使用一个分号隔开。

    dxToolbar组件必须有data-dx-left-locations或者是data-dx-right-locations属性，data-dx-left-locations属性列出了分配给左边的工具栏的位置，data-dx-right-locations属性列出了分配到工具栏的右侧的位置。

    下面的代码片段演示了一个支持命令的自定义布局，声明了一个工具栏的布局有两个命令位置“back”和“create”。命令分配给“back”的位置都显示在左边的工具栏，分配给“create”的位置都显示在右侧的工具栏。

<div data-dx-role="layout" data-dx-name="myLayout">
 <div data-dx-placeholder="header">
   <div data-bind="dxToolbar: {}" 
       data-dx-command-container="back: { showIcon: false }, create: { showText: false }" 
       data-dx-left-locations="back" data-dx-right-locations="create"> </div>
 </div> 
</div>
>>DevExtreme下载