文档 下载安装 问答 主机

Knockout 调用子元素

今天,我们介绍一下在 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 –>

本教程翻译自Mageplaza模块开发系列,其他内容请点击下面链接: