命令主要是關聯當前視圖的一個抽象操作，幫助生產出真正有著本地化外觀和風格的跨平臺應用程序，來看一下DXTREME ENTERPRISE中的命令。

     來看一個例子，假設您有一個視圖，在為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>

慧都學院2017全新DevExpress線下研修班火熱報名中！