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.
No comments:
Post a Comment