今天，我们介绍一下在 Magento2 中，Knockout 如何调用子元素。请按照给出的以下步骤操作。
Magento2 中的 Knockout 是什么？
首先，我们需要理解 Magento2 中的 Knockout 的作用。在 Magento2 商店的前端中，Knockout 是一个设计模式为 Model-View-ViewModel (MMVM) Javascript 库。在 Magento2 的每一个页面中你都可以看到 Knockout，尤其是在结账页面用的最多。在有任何改变的情况下，Knockout 可以很容易地实现用户界面的自动更新。
在 Magento2 模板中，Knockou 调用子元素的概述
在 Magento2 模板中的 knockout，可以通过简单的步骤来调用子元素：
-
第一步：
在 Magento2 模板的布局中，创建两个子元素：child_a 和 child_b -
第二步：
在 list.html 中声明所有的子元素
第一步，在 Magento2 模板的布局中，创建两个子元素：child_a 和 child_b
<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>
第二步，在 list.html 中声明所有的子元素
可以使用以下命令在 list.html 中同时声明所有的子元素：
<!– ko foreach: elems() –>
<!– ko template: getTemplate() –><!– /ko –>
<!– /ko –>
或者分别声明 “child_a” 和 “child_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 –>