{"id":86,"date":"2018-04-17T11:40:29","date_gmt":"2018-04-17T11:40:29","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/2018\/04\/17\/call-children-in-magento-2-template-knockout\/"},"modified":"2025-05-22T17:32:06","modified_gmt":"2025-05-22T12:02:06","slug":"call-children-in-magento-2-template-knockout","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/call-children-in-magento-2-template-knockout\/","title":{"rendered":"How to Call Children in Magento 2 Template Knockout"},"content":{"rendered":"\n

Magento 2 Knockout is the JavaSript Library for Model-View-View-Model on the frontend of the store. Magento 2 Knockout can be seen on every Magento 2 page but in majority seen on the checkout page. It is used to quickly auto update the user interface. The purpose of this tutorial to call children in Magento 2 Template Knockout.<\/strong><\/em><\/p>\n\n\n\n

Steps to Call Children in Magento 2 Template Knockout<\/h2>\n\n\n\n

1. Register two children: child_a<\/em><\/strong> and child_b<\/em><\/strong> in the layout of Magento 2 template<\/p>\n\n\n\n

<?xml version=\"1.0\"?>\n<page layout='1column' xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"\n   xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\">\n  <body>\n      <referenceContainer name=\"content\">\n          <block class=\"Magestore\\Webpos\\Block\\Customer\\Lists\" before=\"-\" cacheable=\"false\" template=\"customer\/list.phtml\">\n              <arguments>\n                  <argument name=\"jsLayout\" xsi:type=\"array\">\n                      <item name=\"components\" xsi:type=\"array\">\n                          <item name=\"customer-list\" xsi:type=\"array\">\n                              <item name=\"component\" xsi:type=\"string\">Meetanshi_HelloWorld\/js\/view\/customer\/list<\/item>\n                              <item name=\"config\" xsi:type=\"array\">\n                                  <item name=\"template\" xsi:type=\"string\">Meetanshi_HelloWorld\/customer\/list<\/item>\n                              <\/item>\n                              <item name=\"children\" xsi:type=\"array\">\n                                  <item name=\"child_a\" xsi:type=\"array\">\n                                      <item name=\"sortOrder\" xsi:type=\"string\">2<\/item>\n                                      <item name=\"component\" xsi:type=\"string\">Meetanshi_HelloWorld\/js\/view\/customer\/list<\/item>\n                                      <item name=\"config\" xsi:type=\"array\">\n                                          <item name=\"template\" xsi:type=\"string\">Meetanshi_HelloWorld\/customer\/child_a<\/item>\n                                      <\/item>\n                                  <\/item>\n\n                                  <item name=\"child_b\" xsi:type=\"array\">\n                                      <item name=\"sortOrder\" xsi:type=\"string\">1<\/item>\n                                      <item name=\"component\" xsi:type=\"string\">Meetanshi_HelloWorld\/js\/view\/customer\/list<\/item>\n                                      <item name=\"config\" xsi:type=\"array\">\n                                          <item name=\"template\" xsi:type=\"string\">Meetanshi_HelloWorld\/customer\/child_b<\/item>\n                                      <\/item>\n                                      <item name=\"displayArea\" xsi:type=\"string\">child_b<\/item>\n                                  <\/item>\n                              <\/item>\n                          <\/item>\n                      <\/item>\n                  <\/argument>\n              <\/arguments>\n          <\/block>\n      <\/referenceContainer>\n  <\/body>\n<\/page><\/pre>\n\n\n\n
2. Declare all children in the file list.html<\/p>\n\n\n\n
    \n
  • call all children in the file list.html by using the command:
    <\/li>\n<\/ul>\n\n\n\n
    <!\u2013 ko foreach: elems() \u2013>\n<!\u2013 ko template: getTemplate() \u2013><!\u2013 \/ko \u2013>\n<!\u2013 \/ko \u2013><\/pre>\n\n\n\n
      \n
    • Or, call the \u201cchild a\u201d in the file list.html by using the command:<\/li>\n<\/ul>\n\n\n\n
      <div data-bind=\"scope: requestChild('child_a')\">\n   <!-- ko template: getTemplate() --><!-- \/ko -->\n <\/div><\/pre>\n\n\n\n
        \n
      • You can call \u201cchild b\u201d via displayArea in the file list.html by using command:<\/li>\n<\/ul>\n\n\n\n
        <!\u2013 ko foreach: getRegion(\u2018child_b\u2019) \u2013>\n<!\u2013 ko template: getTemplate() \u2013><!\u2013 \/ko \u2013>\n<!\u2013 \/ko \u2013><\/pre>\n\n\n\n
        Thank You for referring my tutorial. Hope you have now become familiar with calling children in Magento 2 template knockout.<\/p>\n","protected":false},"excerpt":{"rendered":"
        Magento 2 Knockout is the JavaSript Library for Model-View-View-Model on the frontend of the store. Magento 2 Knockout can be seen on every Magento 2…<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-86","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/86","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=86"}],"version-history":[{"count":3,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/86\/revisions"}],"predecessor-version":[{"id":15660,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/86\/revisions\/15660"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=86"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=86"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=86"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}