How to Call Children in Magento 2 Template Knockout

Magento 2 Knockout is the JavaSript Library for Model-View-View-Model on the frontend of the store. Magento 2 Knockout can be seen on every Magento 2 page but in majority seen on the checkout page. It is used to quickly auto update the user interface. The purpose of this tutorial to call children in Magento 2 Template Knockout.

Steps to Call Children in Magento 2 Template Knockout

1. Register two children: child_a and child_b in the layout of Magento 2 template

<?xml version="1.0"?>
<page layout='1column' xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
  <body>
      <referenceContainer name="content">
          <block class="Magestore\Webpos\Block\Customer\Lists" before="-" cacheable="false" template="customer/list.phtml">
              <arguments>
                  <argument name="jsLayout" xsi:type="array">
                      <item name="components" xsi:type="array">
                          <item name="customer-list" xsi:type="array">
                              <item name="component" xsi:type="string">Meetanshi_HelloWorld/js/view/customer/list</item>
                              <item name="config" xsi:type="array">
                                  <item name="template" xsi:type="string">Meetanshi_HelloWorld/customer/list</item>
                              </item>
                              <item name="children" xsi:type="array">
                                  <item name="child_a" xsi:type="array">
                                      <item name="sortOrder" xsi:type="string">2</item>
                                      <item name="component" xsi:type="string">Meetanshi_HelloWorld/js/view/customer/list</item>
                                      <item name="config" xsi:type="array">
                                          <item name="template" xsi:type="string">Meetanshi_HelloWorld/customer/child_a</item>
                                      </item>
                                  </item>

                                  <item name="child_b" xsi:type="array">
                                      <item name="sortOrder" xsi:type="string">1</item>
                                      <item name="component" xsi:type="string">Meetanshi_HelloWorld/js/view/customer/list</item>
                                      <item name="config" xsi:type="array">
                                          <item name="template" xsi:type="string">Meetanshi_HelloWorld/customer/child_b</item>
                                      </item>
                                      <item name="displayArea" xsi:type="string">child_b</item>
                                  </item>
                              </item>
                          </item>
                      </item>
                  </argument>
              </arguments>
          </block>
      </referenceContainer>
  </body>
</page>

2. Declare all children in the file list.html

• call all children in the file list.html by using the command:
  

<!– ko foreach: elems() –>
<!– ko template: getTemplate() –><!– /ko –>
<!– /ko –>

• Or, call the “child a” in the file list.html by using the command:

<div data-bind="scope: requestChild('child_a')">
   <!-- ko template: getTemplate() --><!-- /ko -->
 </div>

• You can call “child b” via displayArea in the file list.html by using command:

<!– ko foreach: getRegion(‘child_b’) –>
<!– ko template: getTemplate() –><!– /ko –>
<!– /ko –>

Thank You for referring my tutorial. Hope you have now become familiar with calling children in Magento 2 template knockout.