15/08/2022
We use cookies to make your experience better. To comply with the new e-Privacy directive, we need to ask for your consent to set the cookies. Learn more.
How to call children in Magento 2 template knockout
Overview of calling children in Magento 2 template knockout
Create two children: child_a and child_b in the layout of the 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="VendorName\ModuleName\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">VendorName_ModuleName/js/view/customer/list</item>
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">VendorName_ModuleName/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">VendorName_ModuleName/js/view/customer/list</item>
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">VendorName_ModuleName/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">VendorName_ModuleName/js/view/customer/list</item>
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">VendorName_ModuleName/customer/child_b</item>
</item>
<item name="displayArea" xsi:type="string">child_b</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</block>
</referenceContainer>
</body>
</page>Declare all children in the file list.html
<!– 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.htmlvia 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.htmlby the command below:
<!– ko foreach: getRegion(‘child_b’) –>
<!– ko template: getTemplate() –><!– /ko –>
<!– /ko –>
If you are looking for Magento Developers, visit Magento Web Agency.
Related Products