Shopping cart

How to call children in Magento 2 template knockout

Today, I will introduce you how to call children in Magento 2 template knockout via the steps. Let’s follow and do as the given instructions!

What is the knockout in Magento 2?

First of all, we also need to understand the responsibility of Magento 2 knockout. The knockout is considered as a javascript library that supports for Model-View-View-Model (MVVM) design pattern on the frontend of Magento 2 store. You can see Knockout in Magento 2 on every page and particularly, the Knockout is used mostly on the checkout page. The knockout allows auto-updating the user interface quickly and easily when there is any change.

Overview of calling children in Magento 2 template knockout

In Magento 2 template knockout, you can call the children only with the simple steps:

  • Step 1: Create two children: child_a and child_b in the layout of Magento 2 template
  • Step 2: Declare all children in the file list.html

Step 1: Create 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="Mageplaza\HelloWorld\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">Mageplaza_HelloWorld/js/view/customer/list</item>
                              <item name="config" xsi:type="array">
                                  <item name="template" xsi:type="string">Mageplaza_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">Mageplaza_HelloWorld/js/view/customer/list</item>
                                      <item name="config" xsi:type="array">
                                          <item name="template" xsi:type="string">Mageplaza_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">Mageplaza_HelloWorld/js/view/customer/list</item>
                                      <item name="config" xsi:type="array">
                                          <item name="template" xsi:type="string">Mageplaza_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>

Step 2: Declare all children in the file list.html

You can declare all children in the file list.html at the same time with the following command:

<!– ko foreach: elems() –>

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

<!– /ko –>

Or do for “child a” and “child b” separately as the following:

  • Declare the “child a” in the file list.html via the code snippet:
<div data-bind="scope: requestChild('child_a')">

  <!-- ko template: getTemplate() --><!-- /ko -->

</div>
  • Then, declare the “child b” via displayArea in the file list.html by the command below:
<!– ko foreach: getRegion(‘child_b’) –>
<!– ko template: getTemplate() –><!– /ko –>
<!– /ko –>


Add Top Link

Change product price with Plugi



Meet Mageplaza at Meet Magento Asia

Enjoyed the tutorial? Spread it to your friends!

magento-2-tutorial
how-to
call
children
magento-2-template-knockout

Comments for How to call children in Magento 2 template knockout

Please leave comments if you have any questions, feedbacks.

Module Development

We recommend:

You also may like these Magento 2 Extensions

One Step Checkout
One Step Checkout

$199
69 reviews

Layered Navigation
Layered Navigation

$99
no review

Automatic Related Products
Automatic Related Products

$199
no review

Gift Card
Gift Card

$199
no review

People also searched for:

  • magento 2 how to call children in magento 2 template knockout