Vue SPA Framework - Markup Components - ViewPlaceholder
The dxViewPlaceholder markup component enables you to display a view inside another view as a way of reusing a markup (similar to partial rendering in ASP.NET MVC or ASP.NET user controls). To do this, create an empty div element inside a view markup. To declare this element as the place where another view will be rendered, set the element's data-options attribute to dxViewPlaceholder. Set the viewName configuration option of the dxViewPlaceholder component to the name of the view to be rendered to this placeholder.
<!--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', onClick: buttonClicked }"></div> <div class="mapsContainer" data-bind="dxMap: { center: 'Brooklyn Bridge,New York,NY', zoom: 10 }"></div> </div> </div>
For more information about views, refer to the Views and Layouts help section.
Configuration
Name | Description |
---|---|
viewName |
Specifies the name of the view to be rendered to this placeholder element. |
If you have technical questions, please create a support ticket in the DevExpress Support Center.