/   /   /  Magento 2 UI knockoutjs: using container less <!-- ko template: getTemplate() -->


For more extensions and themes visit our store

Magento 2 UI knockoutjs: using container less <!-- ko template: getTemplate() -->

Magento2 manage dynamic JavaScript UIs with the Model-View-View Model (MVVM) pattern  
“knockoutjs” ,  yes observe and change data with easy and structured way (HTML data bindings). In this tutorial will be introduce "Virtual elements"  <!-- ko  --> <!-- /ko -->.
knockoutjs work with two type of element Normal node and Comment node '"Virtual elements" is an abstraction on top of the usual DOM API which understands the notion that comment nodes' ,  The point of all this is to support containerless templates (e.g., <!-- ko foreach:someCollection -->blah<!-- /ko -->)  
if you play inside .phtml files you will finding <!-- ko  --> anywhere , but in this tutorial we want analyze <!-- ko template: getTemplate() -->  .
Firstly :
you can see this tutorial about Knockout Container less Templates  in youtube is very helpful.
Small global example :
after included knockout.js inside your any html head tag put:

  2. <div class='topclass' data-bind="template: 'subTmpl'"></div>
  3. <script id="subTmpl" type="text/html">
  4.     <div class="myclass" data-bind="text: 'SomeText'"></div>
  5. </script>

simple here I tell to  knockout fill my element with template where id is 'subTmpl' here simple result my element (imagine render not the code source) it will be filled  as :
  2. <div class='topclass'>
  3. <div class="myclass" >SomeText</div>
  4. </div>

Frontend Case :
1 – declare template inside layout
Open  vendor/magento/module-checkout/view/frontend/templates/cart/minicart.phtml ,you will finding:
  2.             <div id="minicart-content-wrapper" data-bind="scope: 'minicart_content'">
  3.                 <!-- ko template: getTemplate() --><!-- /ko -->
  4.             </div>

If you go to layout responsible "handler" of this block vendor/magento/module-checkout/view/frontend/layout/default.xml in top you will find :
  2. …..........................
  3.             <block class="Magento\Checkout\Block\Cart\Sidebar" name="minicart" as="minicart" after="logo" template="cart/minicart.phtml">
  4.                 <arguments>
  5.                  <argument name="jsLayout" xsi:type="array">
  6.                    <item name="types" xsi:type="array"/>
  7.                     <item name="components" xsi:type="array">
  8.                             <item name="minicart_content" xsi:type="array">
  9.                                 <item name="component" xsi:type="string">Magento_Checkout/js/view/minicart</item>
  10.                                 <item name="config" xsi:type="array">
  11.                                     <item name="template" xsi:type="string">Magento_Checkout/minicart/content</item>
  12. …..................................

Note : here the team  Magento2 declare the js responsible of this component and template inside  the layout  .xml you can See:  Magento_Checkout/js/view/minicart equal vendor/magento/module-checkout/view/frontend/web/js/view/minicart.js and  Magento_Checkout/minicart/content equal vendor/magento/module-checkout/view/frontend/web/template/minicart/content.html but you can add the template inside the js responsible of component.

if you go to vendor/magento/module-checkout/view/frontend/cart/minicart.phtm  you can see:

  2. <script type="text/x-magento-init">
  3.     {
  4.         "[data-block='minicart']": {
  5.             "Magento_Ui/js/core/app": <?php /* @escapeNotVerified */ echo $block->getJsLayout();?>
  6.         },
  7.         "*": {
  8.             "Magento_Ui/js/block-loader": "<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/loader-1.gif'); ?>"
  9.         }
  10.     }
  11.     </script>

the declaration of component is  "Magento_Ui/js/core/app": <?php /* @escapeNotVerified */ echo $block->getJsLayout();?> ,Yes we get the content from the xml and from the block Magento\Checkout\Block\Cart\Sidebar magento use $block->getJsLayout() for convert to format json.

Ok how  Magento 2 Ui  use Knockoutjs and other intern js for getting the final result. Normally the standard Knockoutjs included from magento2/lib/web/knockoutjs and the other part created by magento2 team for personalized the native tasks and add other tasks is inside vendor/magento/module-ui/view/base/web/js/lib/ko  , Ok  Ko read the virtual element <!-- ko template: getTemplate() --><!-- /ko -->  globally ko process and take the directive template (we want bind data in this element by using a predefine template) , this process is done inside Knockoutjs.js from line 2555 to 2625 finally you get : return new Function("$context", "$element", functionBody);

but where is the getTemplate()  function wow it's inside : magento2/app/code/Magento/Ui/view/base/web/js/lib/core/element/element.js

  2.         getTemplate: function () {
  3.             return this.template;
  4.         },

you can use for example console.log(this.template); and you see all templates used inside many .phtml with virtual element:
"Magento_Checkout/minicart/content" element.js:256
"Magento_Checkout/minicart/subtotal" element.js:256
"Magento_Checkout/minicart/item/default" element.js:256
"Magento_Tax/checkout/minicart/subtotal/totals" element.js:256

you can add the  component and with it you can create you own js related to this template and put the template.

2 – declare  template inside js:
You can declare the template inside .xml layout with the component declaration or inside the js related component go to:
Magento/Customer/view/frontend/templates/account/authentication-popup.phtml you will find in the line 13:
   <!-- ko template: getTemplate() --><!-- /ko -->
and inside vendor/magento/module-customer/view/frontend/layout/default.xml you have:

  2. ….................
  3.      <block class="Magento\Customer\Block\Account\AuthenticationPopup" name="authentication-popup" as="authentication-popup" template="account/authentication-popup.phtml">
  4.                 <arguments>
  5.                     <argument name="jsLayout" xsi:type="array">
  6.                         <item name="components" xsi:type="array">
  7.                             <item name="authenticationPopup" xsi:type="array">
  8.                                 <item name="component" xsi:type="string">Magento_Customer/js/view/authentication-popup</item>

Magento_Customer/js/view/authentication-popup is a .js inside :
vendor/magento/module-customer/view/frontend/web/js/view and it have the path of template:

  2.         return Component.extend({
  3.             registerUrl: window.authenticationPopup.customerRegisterUrl,
  4.             forgotPasswordUrl: window.authenticationPopup.customerForgotPasswordUrl,
  5.             modalWindow: null,
  6.             isLoading: ko.observable(false),
  7.             defaults: {
  8.                 template: 'Magento_Customer/authentication-popup'
  9.             },

The path of template   Magento_Customer/authentication-popup is inside vendor/magento/module-customer/view/frontend/web/template/authentication-popup.html


Related Posts

make your store more efficient

Solving problems. With open source technology. Professional results. That’s what makes Ibnab your best choice

IBNAB is a company made of a group of professionals whose work is providing secure open source solutions. Our company strives for reaching magnificent results with each experience and provides professional open source solutions that cover every part of the business process.