命令主要是關(guān)聯(lián)當(dāng)前視圖的一個(gè)抽象操作，幫助生產(chǎn)出真正有著本地化外觀和風(fēng)格的跨平臺(tái)應(yīng)用程序，來(lái)看一下DXTREME ENTERPRISE中的命令。

     來(lái)看一個(gè)例子，假設(shè)您有一個(gè)視圖，在為iPhone設(shè)計(jì)的應(yīng)用程序中包含“搜索”和“添加”按鈕。“搜索”按鈕位于標(biāo)題欄的左側(cè)，“添加”按鈕位于標(biāo)題欄的右側(cè)。如果說(shuō)你想要在android 手機(jī)上使用這個(gè)應(yīng)用程序，或者是在底部的導(dǎo)航欄上顯示“添加”按鈕，同時(shí)，由于這款手機(jī)有內(nèi)置硬件的“搜索”按鈕，你不想在屏幕上顯示“搜索”按鈕。因此，在 iOS 設(shè)備上，您需要兩個(gè)工具欄項(xiàng)目，同時(shí)在Android設(shè)備上你也需要一個(gè)單獨(dú)的導(dǎo)航欄項(xiàng)目。你不僅需要兩個(gè)不同的布局，還需要?jiǎng)?chuàng)建管理在這些平臺(tái)上的不同的組件。

    代替在不同平臺(tái)上的手動(dòng)的管理，你可以為視圖定義兩個(gè)命令，現(xiàn)在你有一個(gè)單一的視圖，可以同時(shí)在iPhone 和 Android 設(shè)備上正常工作，并且提供本機(jī)的用戶體驗(yàn)。

    若要聲明一個(gè)命令，創(chuàng)建一個(gè)空的 div 元素。將該元素的data-dx-role設(shè)置為命令，并使用 dxCommand KnockoutJS 綁定到下面指定的命令選項(xiàng)。

Action

當(dāng)命令執(zhí)行的時(shí)候，調(diào)用ViewModel function的名字。

Location

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

Title

命令標(biāo)題。

<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 中出現(xiàn)的“搜索”和“添加”功能。此外這個(gè)視圖顯示在定義了“Back” 和“Add”位置的布局上，Navbar內(nèi)置布局就是一個(gè)這種布局的例子：

    要在在自定義布局中支持命令，需要在布局中聲明 dxList、 dxNavBar 或 dxToolbar組件。設(shè)置組件的data-dx-command-container屬性值到一個(gè)位置列表再映射到組件，使用一個(gè)分號(hào)隔開(kāi)。

     dxToolbar組件必須有data-dx-left-locations或者是data-dx-right-locations屬性，data-dx-left-locations屬性列出了分配給左邊的工具欄的位置，data-dx-right-locations屬性列出了分配到工具欄的右側(cè)的位置。

    下面的代碼片段演示了一個(gè)支持命令的自定義布局，聲明了一個(gè)工具欄的布局有兩個(gè)命令位置“back”和“create”。命令分配給“back”的位置都顯示在左邊的工具欄，分配給“create”的位置都顯示在右側(cè)的工具欄。

<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>

慧都學(xué)院2017全新DevExpress線下研修班火熱報(bào)名中！