jQuery/JS SPA Framework - Markup Components - View - Configuration

By default, this option is not specified, which means that caching of this view is enabled. In this instance, the first time the view is displayed - it is cached. Each following time when this view must be displayed repeatedly, it is obtained from the cache. This allows the application to not have to create this view each time it is displayed. For details on the process of the view display, refer to the View Life Cycle topic.

To disable view caching, set this option to true. In this mode, this view will be created and rendered each time it is displayed.

To disable caching totally for all application views, set the application's disableViewCache configuration option to true.

To display a modal view in a popup window, add the Popup Layout to your application. This layout uses the Popup widget to display a view in a popup window. By default the SimpleLayoutController controller is used to manage the popup window content. So, when defining a modal view, find out which content placeholders and command containers are available in the Simple Layout.

<div data-options="dxView : { name: 'login', title: 'Log in', modal: true } " >
    <div data-options="dxContent : { targetPlaceholder: 'content' } " >
        ...
    </div>
</div>

If a view should be modal in specific scenarios only, do not set the modal option for it. Instead, use the modal parameter when navigating to the view using the navigate() method or the modal option when using a command.

Pay attention to the recommendations given for using modal views in the Modal Contexts article. If it is better to display an "alert"/"confirm" dialog instead of a modal view, use an appropriate method of the DevExpress.ui.dialog object.

Every view has a unique name that serves as an identifier. The framework uses this name to find the view's HTML markup and a JavaScript code. Set this name to the name option of the dxView component defining a view template. In addition, use this name for the JavaScript function that must be called when displaying the view.

In addition to device orientation, you can define view HTML templates specific to a device platform or a device type, or set a custom context. For details, refer to the Context Specific Markup topic.

Watch Video

Use this option if the view is displayed within the predefined Split layout. Usually, a list view is displayed in the 'master' pane and a detail view is displayed in the 'detail' pane.

Use this option to set a static title for the view.

<div data-options="dxView : { name: 'home', title: 'Home' } ">
    ...
</div>

If you need to change the view's title dynamically, add an observable title field to the view's ViewModel, as shown below.

<div data-options="dxView : { name: 'home' } ">
    ...
</div>

MyApp.home = function(params) {
    var viewModel = {
        title: ko.observable('My new title')
    };
    return viewModel;
};

Internally, a ViewModel is populated by the fields that correspond to the options of the respective dxView component. However, the fields that are set explicitly in the ViewModel override the corresponding fields created from the options implicitly. So, the statically set title is available using the title field of the ViewModel, if you don't add the title field explicitly.

    <div class="layout-header" data-options="dxContentPlaceholder : { name: 'header' } " >
        <div
            data-bind="dxToolbar: { dataSource: [ { text: title, location: 'center' } ] }"
            data-options="dxCommandContainer : { id: 'ios-header-toolbar' } " >
        </div>
    </div>

In this instance, the toolbar's text will be set to the value of the statically declared title or of the dynamically set title field of the ViewModel.

If the field to which the layout's element is bound has another name, change the corresponding field name in your ViewModel or the option name in the dxView definition. If a layout does not include a UI element that represents a view title, neither the title field in your ViewModel nor the title option in the dxView definition will have an effect.