How to add childview to a view that already exists in the DOM.

Child views can be added to elements that have the data-view or data-cms-area data attribute. If there are multiple elements in a template that have a data-view attribute value of view_id, the child view is added to all elements with that ID. Elements with the data-view attribute act as placeholders in the application. If there is content in the view (which is typically the case), the child view replaces the current content.

layout.addChildView('Header.View', function () {
  return new HolidayBannerView({});
});

In the above example, the view HolidayBannerView will be added as a child view of an element in any template that has a data-view attribute of Header.View

layout.addChildView('cms:header_banner_top', function () {
  return new HolidayBannerView({});
});

In the above example, a child view is added to a predefined SMT area called ‘header_banner_top’. In the template, the header_banner_top SMT area might be in a div tag in the following way: <div data-cms-area="header_banner_top"></div>. Because header_banner_top is a predefined SMT area, the cms: prefix is used before the view_id argument.

Parameters :

data_view :

The view to which the child view will be added. data_view is the value of the ‘data-view’ or ‘data-cms-area’ data attributes of an element on the page. For example, the header logo view uses the following data-view data attribute: <div data-view="Header.Logo">.

view_constructor :

An instance of a view. Use a constructor function to get an instance of a view.

Returns :

Returns null if the operation is successful. Otherwise, it throws an exception.