magento2 knockoutjs custom template binding

by

The question:

I’m trying to understand knockoutjs in magento2.especially custom template binding.I’m not able to get idea flow of rendering this.

Can any one have idea how it works?
atleast Where can I find definition of getTemplate?

<!-- ko if: (!quoteIsVirtual) -->
            <!-- ko foreach: getRegion('customer-email') -->
                <!-- ko template: getTemplate() --><!-- /ko -->
            <!--/ko-->
        <!--/ko-->

The Solutions:

Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.

Method 1

Open 

Magento/Checkout/view/frontend/layout/checkout_index_index.xml

file. look at following line

<item name="component" xsi:type="string">Magento_Checkout/js/view/shipping</item>

So 

Magento/Checkout/view/frontend/web/js/view/shipping.js

this is your js file. Open it. Look 

template: 'Magento_Checkout/shipping'

this is the template file for this JS.

Go back to 

Magento/Checkout/view/frontend/layout/checkout_index_index.xml

line 122 (M2 2.0.0-rc) 

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

here you can see some child node. like

<item name="customer-email" xsi:type="array">
----
---
</item>

So 

getTemplate()

is responsible for current template rendering that means 

Magento/Checkout/view/frontend/web/template/form/element/email.html

Open it, then you can see following code snippet


<!-- ko foreach: getRegion('additional-login-form-fields') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
            <!-- /ko -->

this ‘additional-login-form-fields’ node is the child node of ‘customer-email’ .

For your code snippet, if quote is not virtual then pick ko 

foreach: getRegion('customer-email')

which is child node name and render its template.

Method 2

You can find defination of getTemplate from,

`rootvendormagentomodule-uiviewbasewebjslibcoreelementelement.js`

file from line no. 255 to 257. 

  getTemplate: function () {
                return this.template;
            }


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Comment