How to define Require JS Plugin in Magento?

You can create Require JS plugin in Magento with text! as a suffix and pass HTML file path in the dependency of the define( ) method in javascript.

An Example of a text plugin in Magento,

'text!Jesadiya_Blog/template/plugin.html'

The template will be working with the dependency of ‘mage/template’ to parse underscore js template engine syntax to convert it to normal text.

define([
    'jquery',
    'mage/template',
    'text!Jesadiya_Blog/template/plugin.html',
    'mage/translate'
], function ($, mageTemplate, htmlFile, $t) {
    var htmlContent = mageTemplate(htmlFile, {
        data: {
            title: $t("<h1>Title</h1>"),
            linkText: $t("<h1>Anchor link text</h1>")
        }
    });
    $('#main').html(htmlContent);
});

The above JS file will add HTML Content to the DOM that contains id =”main” in a template.

Create an HTML file in your web/template folder,

<div class="field">
    <p class="text-main"><%= data.title %></p>
    <p class="text-secondary"><%- data.linkText %></p>
</div>

You can check the underscore JS syntax by click on the link, Different syntax of the underscore JS template engine.

domReady! is also the Require Js plugin and is used to load content after the page loaded completed.