Markup Components View

An object used to define markup options for a view.

Type: Object

A view is defined by a piece of HTML markup that forms the view template. The view can optionally have JavaScript code (in a separate file) and an associated style sheet used to customize the look and feel. Every view has a unique name that serves as an identifier. The framework uses this name to find the view's HTML markup and javascript code. The javascript code assiciated with a view contains a function called by the view's name.

To define a View, add a div element and include the required markup in it. To declare the View markup as a View, set the wrapping div's data-options attribute to dxView, and pass the required View markup options.

HTML
<div data-options="dxView: { name: 'mainView', title: 'Home' }">
    <div data-options="dxContent: { targetPlaceholder: 'content' }">
        <div class="buttonContainer" data-bind="dxButton: { text: 'Click me', clickAction: buttonClicked }"></div>
        <div class="mapsContainer" data-bind="dxMap: { location: 'Brooklyn Bridge,New York,NY', zoom: 10 }"></div>
    </div>
    <div data-options="dxContent: { targetPlaceholder: 'footer' }">
        <span data-bind="text: footerText"></span>
    </div>
</div>

For more information about views, refer to the Views and Layouts help section.

Configuration

This section describes configuration options used to create a view.