What is the knockout in Magento 2?
First of all, we also need to understand the responsibility of 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 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.
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_aandchild_bin the layout of Magento 2 template - Step 2: Declare all children in the file
list.html
第1步：创建两个子项：child_a并child_b在Magento 2模板的布局中
<?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>第2步：声明文件中的所有子项 list.html
您可以list.html使用以下命令同时声明文件中的所有子项：
<!– ko foreach: elems() –>
<!– ko template: getTemplate() –><!– /ko –>
<!– /ko –>
或者分别为“孩子a”和“孩子b”做以下事项：
list.html通过代码片段在文件中声明“child a” ：
<div data-bind="scope: requestChild('child_a')">
<!-- ko template: getTemplate() --><!-- /ko -->
</div>- 然后，
list.html通过以下命令在文件中通过displayArea声明“child b” ：
<!– ko foreach: getRegion(‘child_b’) –>
<!– ko template: getTemplate() –><!– /ko –>
<!– /ko –>