How to call children in Magento 2 templates knock out?

Here are the following steps which explain you how to call children in Magento 2 templates knock out:

Step 1: Register Child_ a and Child_b in the layout of Magento template

Step 2: Call all children in the file list.html by using command

You may observe that Magento 2 template use knockout in many pages.

In Magento 1, you can call a child block html like <?php echo $this->getChildHtml(); ?> , <?php echo $this->getChildHtml(‘child_name’); ?> or <?php echo $this->getChild(‘child_name’)->toHtml(); ?>.

In this guide, we will learn how to call children in template knockout.

Step 1:

  • We will register Child_a and Child_b in the layout of Magento 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="Webnexs\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">Webnexs_Webpos/js/view/customer/list</item>


                              <item name="config" xsi:type="array">


                                  <item name="template" xsi:type="string">Webnexs_Webpos/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">Webnexs_Webpos/js/view/customer/list</item>


                                      <item name="config" xsi:type="array">


                                          <item name="template" xsi:type="string">Webnexs_Webpos/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">Webnexs_Webpos/js/view/customer/list</item>



                                      <item name="config" xsi:type="array">



                                          <item name="template" xsi:type="string">Webnexs_Webpos/customer/child_b</item>


                                      </item>

                                <item name="displayArea" xsi:type="string">child_b</item>



                                  </item>


                              </item>


                          </item>


                      </item>


                  </argument>


              </arguments>

          </block>

      </referenceContainer>


  </body>


</page>

Step 2:

  • You can call all children in the file list.html by using command:

<!– ko foreach: elems() –>

<!– ko template: getTemplate() –><!– /ko –>

<!– /ko –>

  • call the “child a” in the file list.html by using the following  command:
<div data-bind="scope: requestChild('child_a')">

<!-- ko template: getTemplate() --><!-- /ko -->

</div>
  • You can call “child b” through display Area in the file list.html by using the following command:

  <!– ko foreach: getRegion(‘child_b’) –>

  <!– ko template: getTemplate() –><!– /ko –>

  <!– /ko –>

Last Update: April 5, 2018  

February 28, 2018   145   Nandini R    Magento2    
Total 1 Votes:
0

Tell us how can we improve this post?

+ = Verify Human or Spambot ?

Leave a Reply

Your email address will not be published. Required fields are marked *

Facebook
Google+
http://www.webnexs.com/blog/kb/call-children-magento-2-templates-knock-out
Twitter
LinkedIn