Command

An object used to define markup options for a command.

Type: Object

Commands are abstract actions that can be called from a platform specific location. Suppose you need a view to contain "Back" and "Add" buttons. In an application designed for the iPhone, the "Back" button must be located on the left side of the title bar, and the "Add" button must be located on the right side of the title bar. If you want to make an application for an android phone, you will need to display the "Add" button on the bottom navbar, and not display the "Back" button at all, since the phone has a "Back" button built into the hardware. When implementing an application that will run on both the iPhone and an Android phone, you will not only need to define two different layouts, but also create and manage different widgets for these platforms.

Instead of manually managing different widgets on different platforms, you can define a single view with two commands. In this case, you will have buttons created for commands that will work properly on both iPhone and Android devices. This will also deliver a native user experience for each device.

Commands are declared in view markup within a root element. To add a command, add a div element with the data-bind attribute set to dxCommand, and pass the required markup options. These options include the action to be performed when executing the command, an abstract location for the command on the screen, along with the title, icon, and the enabled and visible states.

HTML
<div data-options="dxView: { name: 'index', title: 'Home' }">
    <div data-bind="dxCommand: { action: add, location: 'create', title: 'Add' } "></div>
</div>

To function properly, this code snippet expects the "add" field to be present in the ViewModel. This field can be a function that will be called when executing the Add command, or a string representing the URL to navigate to. To learn more about actions, refer to the Actions documentation section.

The framework comes with a set of predefined layouts that are located in the layouts folder installed with other PhoneJS resources. In addition, you can find the layouts folder in the template project that comes with PhoneJS, which will assist you as you begin building an application. The following is a list of built-in layouts along with available placeholders and command locations.

  • Navbar

    Exposes the header, content, and footer placeholders. Declares the following command locations: navigation, back, create, edit and save. Defined for iOS, android and win8.

  • SlideOut

    Exposes the header and content placeholders. Declares the following command locations: navigation, menu, back, create, edit, save and delete. Defined for iOS and android.

  • Split

    Exposes the header, content, and footer placeholders. Declares the following command locations: back, create, cancel, edit, save and delete. Defined for win8.

  • Desktop

    Exposes a single content placeholder. Declares the following command locations: navigation, create, edit, save and delete. Defined for the desktop.

  • Empty

    This is the default layout, which exposes a single content placeholder and does not declare command locations.

For more information about commands, refer to the Views and Layouts section of the documentation.

Configuration

This section describes configuration options used to create a command.

Methods

This section describes members used to manipulate the command.