How to call children in Magento 2 template knockout
Today, I will introduce you to 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 the 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 the 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.
Now let’s go into details about calling children in Magento 2 template knockout.
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
andchild_b
in the layout of the 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 –>
##Conclusion
That’s how you can call children in Magento 2 template knockout. I hope this tutorial is helpful for you. Don’t forget to share it with Magento friends to help them out!
Thanks for reading!
Related Topics
- How to create a simple Hello World module for Magento 2
- Magento 2 Block Template Ultimate Guides
- How to Create Module in Magento 2
- How to Create Controller in Magento 2
- How to create CRUD Models in Magento 2
- How to Create Magento 2 Block, Layout and Templates
- Configuration - System.xml
- How To Create Admin Menu In Magento 2
- Admin ACL
- Admin Grid
People also searched for
- magento 2 how to call children in magento 2 template knockout
- 2.3.x, 2.4.x