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.
