Magento 2 template knockout children

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_a and child_b in the layout of Magento 2 template
  • Step 2: Declare all children in the file list.html

第1步:创建两个子项:child_achild_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 –>
赞(0)
微信
支付宝
微信二维码图片

微信扫描二维码打赏

支付宝二维码图片

支付宝扫描二维码打赏

相关文章

0 0 投票数
文章评分
订阅评论
提醒
0 评论
内联反馈
查看所有评论