Magento 2 - Get location of view model of knockoutjs .html template

Question

For example, how can I find out where the model / view model for this template is located at?

vendor/magento/module-checkout/view/frontend/web/template/minicart/item/default.html

Answer 1

To detect the Knockout JS component's location belongs to a Knockout HTML template, you will need to use the search term combination of the module component name and the relative path of the template file without html extension counting from the first character after the web/template/ string, like this: Vendor_Module/relative/path/of/the/template/file/without/html/extension

You can get the module component name in <module directory>/registration.php.

There are 2 places where Knockout JS templates can be declared:

• in the UI component file
• in the Knockout JS component

For example, the HTML template is vendor/magento/module-checkout/view/frontend/web/template/minicart/item/default.html:

• the module component name of vendor/magento/module-checkout is Magento_Checkout
• the relative path of the HTML template without the html extension is minicart/item/default

Here we have search term is: Magento_Checkout/minicart/item/default

You will get the result in the file vendor/magento/module-checkout/view/frontend/layout/checkout_cart_sidebar_item_renderers.xml

<item name="component" xsi:type="string">Magento_Checkout/js/view/cart-item-renderer</item>
<item name="config" xsi:type="array">
    <item name="displayArea" xsi:type="string">defaultRenderer</item>
    <item name="template" xsi:type="string">Magento_Checkout/minicart/item/default</item>
</item>

You can see there is a component config node same level as the config node which declares the template, this is the Knockout JS component you are searching for: Magento_Checkout/js/view/cart-item-renderer (vendor/magento/module-checkout/view/frontend/web/js/view/cart-item-renderer.js).

In other cases, you can find the code declaring the Knockout HTML template in the Knockout JS component like the following. That is the Knockout JS component you are searching for.

defaults: {
    template: 'Magento_Checkout/progress-bar'
},

Answer 2

ViewModels are defined in layout xml files.

So you should search all layout xml files for the usage of the template file. then take a look at the search results and review the definition of the block and check the argument-nodes that are provided.