Magento 2 - how to load JS template from filesystem in jquery widget

Question

For example, native Magento theme-frontend-blank\web\js\navigation-menu.js has such code:

$.widget('mage.navigationMenu', {
    options: {
    ...
        collapsableDropdownTemplate:
            '<script type="text/x-magento-template">' +
                '<li class="level0 level-top more parent">' +
                    '<div class="submenu">' +
                        '<ul><%= elems %></ul>' +
                    '</div>' +
                '</li>' +
            '</script>'

And then they do

        this.collapsableDropdown = $(
            mageTemplate(
                this.options.collapsableDropdownTemplate,
                {elems: this.elemsToCollapseClone}
            )
        );

Is it possible to do something like this

collapsableDropdownTemplate: getTemplate(some_relative_path_to_template) ? instead of

        collapsableDropdownTemplate:
            '<script type="text/x-magento-template">' +
                '<li class="level0 level-top more parent">' +
                    '<div class="submenu">' +
                        '<ul><%= elems %></ul>' +
                    '</div>' +
                '</li>' +
            '</script>'

My template is a little bit bigger and I want to allow frontend developers to modify it.

Answer 1

Yes, we can do it.

1) Template selector: the script and template are in one place.

Using text/x-magento-template

vendor/magento/module-shipping/view/adminhtml/templates/order/tracking.phtml

<script id="track_row_template" type="text/x-magento-template">

......

trackingControl.template = mageTemplate('#track_row_template');

2) Require text (I think you need it)

vendor/magento/module-ui/view/base/web/js/grid/columns/thumbnail.js

Define it: text!Magento_Ui/templates/grid/cells/thumbnail/preview.html

define([
    './column',
    'jquery',
    'mage/template',
    'text!Magento_Ui/templates/grid/cells/thumbnail/preview.html',
    'Magento_Ui/js/modal/modal'
], function (Column, $, mageTemplate, thumbnailPreviewTemplate) {

Use it

var modalHtml = mageTemplate(
            thumbnailPreviewTemplate,
            {
                src: this.getOrigSrc(row), alt: this.getAlt(row), link: this.getLink(row),
                linkText: $.mage.__('Go to Details Page')
            }
        );

See here: vendor/magento/module-ui/view/base/web/js/modal/modal.js