Magento 2：如何在jQuery组件中从文件系统加载JS模板

Great question! Hardcoding templates directly in your JS like the navigation-menu.js example works for small snippets, but for cleaner maintainability (especially with complex templates), loading them from the filesystem is way better. Here's how to do it properly in Magento 2:

Step 1: Create Your Template File #

First, create a separate template file in either your theme or module's web/template directory—this follows Magento's standard structure for reusable templates.

For a Theme: #

Create the file at:
app/design/frontend/YourVendor/YourTheme/Magento_Theme/web/template/navigation/collapsable-dropdown.html

Paste your template content (no HTML escaping needed now!):

<li class="level0 level-top more parent">
    <div class="submenu">
        <ul><%= elems %></ul>
    </div>
</li>

For a Custom Module: #

Place it at:
app/code/YourVendor/YourModule/view/frontend/web/template/navigation/collapsable-dropdown.html

Step 2: Load the Template in Your jQuery Widget #

Magento uses RequireJS, so we'll leverage the text! loader to pull in the template file directly. Here's how to update your widget:

Example Widget Code #

define([
    'jquery',
    'mage/template',
    // Load the template using the text! loader
    'text!Magento_Theme/template/navigation/collapsable-dropdown.html' // For modules, use: 'text!YourVendor_YourModule/template/navigation/collapsable-dropdown.html'
], function ($, mageTemplate, collapsableDropdownTemplate) {
    $.widget('yourVendor.navigationMenu', {
        options: {
            // Assign the loaded template to your widget option
            collapsableDropdownTemplate: collapsableDropdownTemplate
        },

        _create: function () {
            // Use the template exactly like the native Magento code
            const templateData = {
                elems: this._getDropdownElements() // Replace with your actual data source
            };
            this.collapsableDropdown = $(mageTemplate(this.options.collapsableDropdownTemplate, templateData));
            
            // Add your remaining widget logic here...
        },

        _getDropdownElements: function () {
            // Example method to generate your template data
            return '<li class="level1">Sample Dropdown Item</li>';
        }
    });

    return $.yourVendor.navigationMenu;
});

Key Notes #

• Path Syntax: The text! loader follows the pattern text!Vendor_Module/template/[path-to-file].html. For themes, use Magento_Theme as the module reference if your template lives in the theme's Magento_Theme directory.
• Maintainability: Keeping templates in separate HTML files makes them easier to edit, version control, and reuse across multiple widgets.
• Template Syntax: You still use the same <%= variable %> and <% logic %> syntax as the native mage/template system—no changes needed here.
• RequireJS Configuration: You don't need extra RequireJS setup for standard web/template paths; Magento's default configuration resolves these automatically.

Alternative: Load from DOM (For PHP-Driven Templates) #

If your template needs dynamic PHP-generated values, you can embed it in a PHTML file instead:

<script type="text/x-magento-template" id="collapsable-dropdown-template">
    <li class="level0 level-top more parent">
        <div class="submenu">
            <ul><%= elems %></ul>
        </div>
    </li>
</script>

Then load it in your JS by selecting the element:

const collapsableDropdownTemplate = $('#collapsable-dropdown-template').html();

This is handy for templates that need PHP data, but for pure JS templates, loading directly from the filesystem is the cleaner approach.

内容的提问来源于stack exchange，提问作者freento