🔥 Just Launched! Werra Premium Template for HyväSee it in Action

How to Call Children in Magento 2 Template Knockout

By Sanjay JethvaUpdated on May 22, 2025 2 min read

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.

Sanjay Jethva Full Image
Article bySanjay Jethva

Sanjay is the co-founder and CTO of Meetanshi with hands-on expertise with Magento since 2011. He specializes in complex development, integrations, extensions, and customizations. Sanjay is one the top 50 contributor to the Magento community and is recognized by Adobe. His passion for Magento 2 and Shopify solutions has made him a trusted source for businesses seeking to optimize their online stores. He loves sharing technical solutions related to Magento 2 & Shopify.