Here are the following steps which explain to you how to call children in Magento 2 templates knockout:
Step 1: Register Child_ a and Child_b in the layout of the Magento template
Step 2: Call all children in the file list.html by using command
Hire expert Magento 2 solution for adaptive benefits!!!
You may observe that Magento 2 template uses knockout on many pages.
In Magento 1, you can call a child block html like <?php echo $this->getChildHtml(); ?> , <?php echo $this->getChildHtml(‘child_name’); ?> or <?php echo $this->getChild(‘child_name’)->toHtml(); ?>.
How to call children in Magento 2 templates knockout?
In this guide, we will learn how to call children in template knockout.
Step 1:
- We will register Child_a and Child_b in the layout of the Magento 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="Webnexs\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">Webnexs_Webpos/js/view/customer/list</item> <item name="config" xsi:type="array"> <item name="template" xsi:type="string">Webnexs_Webpos/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">Webnexs_Webpos/js/view/customer/list</item> <item name="config" xsi:type="array"> <item name="template" xsi:type="string">Webnexs_Webpos/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">Webnexs_Webpos/js/view/customer/list</item> <item name="config" xsi:type="array"> <item name="template" xsi:type="string">Webnexs_Webpos/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:
- You can call all children in the file list.html by using command:
<!– ko foreach: elems() –>
<!– ko template: getTemplate() –><!– /ko –>
<!– /ko –>
- call the “child a” in the file list.html by using the following command:
<div data-bind="scope: requestChild('child_a')">
<!-- ko template: getTemplate() --><!-- /ko -->
</div>- You can call “child b” through display Area in the file list.html by using the following command:
<!– ko foreach: getRegion(‘child_b’) –>
<!– ko template: getTemplate() –><!– /ko –>
<!– /ko –>
Leave a Reply