ViewPlaceholder

An object used to define markup options for a view placeholder.

Type: Object

The dxViewPlaceholder markup options object enables you to display a View inside another View to reuse markup (similar to partial rendering in ASP.NET MVC or ASP.NET user controls). To do this, create an empty div element inside the View markup. To declare this element as the place where a specified View will be rendered, set the element's data-options attribute to dxViewPlaceholder, and pass the name of the View to be rendered to its viewName configuration option.

HTML
<!--main view-->
<div data-options="dxView: { name: 'mainView', title: 'Home' }">
    <div data-options="dxViewPlaceholder: { viewName: 'content' }"></div>
    <div data-options="dxContent: { targetPlaceholder: 'footer' }">
        <span data-bind="text: footerText"></span>
    </div>
</div>

<!--view part-->
<div data-options="dxView: { name: 'content' }">
    <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>

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

Configuration

An object representing the dxViewPlaceholder configuration options.