How to add one or more child views to a view that already exists in the DOM

Add one or more child views 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 (or data-cms-area) attribute value of view_id, the child views are added to all elements with that ID.

As opposed to the {addChildView} method, the current content in the data attribute element is not replaced by the child views. Instead, the child view is appended after the content in the data attribute element. If you want to add just one single child view while keeping the current content, use this method instead of {addChildView}.

You can also specify the order in which the child views are rendered in the view by setting the childViewIndex property of the child view object. This index is 10-based. Set a value less than 10 to prepend the child view to the current content; set a value greater than 10 to append the child view to the current content. If adding multiple child views, set a different index in each child view object.

The addChildViews method is flexible, but more complex than addChildView. Use the simpler addChildView where possible.

In the following example, addChildViews is used to add two child views to the checkout.WIZARD_VIEW main view. The child views will be added to the placeholder element that has a data-view attribute with the value Wizard.StepNavigation. Wizard.StepNavigation has an object as its value, which holds the child views to be added to the placeholder. Each child view is specified as a separate property/value pair, with the property as the view name and the value as an object that returns the child view. Within the object that returns the child view, you set the index of the child view and a child view construtor function.

checkout.addChildViews(
  checkout.WIZARD_VIEW,
  {
    'Wizard.StepNavigation':
    {
      'FirstCheckoutView':
      {
        childViewIndex: 1,
        childViewConstructor: function ()
        {
          return new FirstCheckoutExtensionView({checkout:checkout});
        }
      },
      'SecondCheckoutView':
      {
        childViewIndex: 2,
        childViewConstructor: function()
        {
          return new SecondCheckoutExtensionView({checkout:checkout})
        }
      }
    }
  }
);