How to Call Children in Magento 2 Template Knockout
By Sanjay Jethva|
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
- Register two children: child_a and child_b in the layout of Magento 2 template
12345678910111213141516171819202122232425262728293031323334353637383940<?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> - Declare all children in the file list.html
- call all children in the file list.html by using the command:
123<!– ko foreach: elems() –><!– ko template: getTemplate() –><!– /ko –><!– /ko –> - Or, call the “child a” in the file list.html by using the command:
123<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:
123<!– ko foreach: getRegion(‘child_b’) –><!– ko template: getTemplate() –><!– /ko –><!– /ko –>
- call all children in the file list.html by using the command:
Thank You for referring my tutorial. Hope you have now become familiar with calling children in Magento 2 template knockout. Doubts for the same are welcomed in the comments section.
Review my blog and reward me with 5 stars if you find it useful:)
5
(based on 8 Reviews)
Prev
How to Add EAV Attribute for the Product in Magento 2
How to Create and Upgrade Database in Magento 2
Next