data-mage-init not working on CMS page

Question

If I add this to a CMS page then it pull in the javascript to the page correctly:

<script type="text/javascript">
    requirejs(['jquery', 'bootstrap'], function (jQuery, jQueryBootstrap) {

    });
</script>

But if I try it with data attribute like so:

<div data-mage-init='{"bootstrap": {}}'>

</div>

Then the javascript is not pulled into the page.

Do data attributes only work in phtml files? Docs seem to say I can use either.

Answer 1

The lack of quotation marks around the configuration part of the init config may be causing a JSON parse error (visible in developer tools javascript console).

<div data-mage-init='{"bootstrap": "{}"}'>
</div>

Answer 2

There is a huge difference between both code pieces.

First one: an inline script with RequireJS call

<script type="text/javascript">
    requirejs(['jquery', 'bootstrap'], function (jQuery, jQueryBootstrap) {

    });
</script>

• RequireJs will load files jquery.js, bootstrap.js in an async way
• When both are loaded (no matter will page loaded or no) and both are executed, then the callback will be executed. In the arguments, it will receive something that jquery.js and bootstrap.jsmodules return.
• If bootstrap.js depends on jQuery but doesn't contain an explicit dependency on 'jquery' module it randomly fails.

Second one: mage-init initializing

<div data-mage-init='{"bootstrap": {}}'>

</div>

• Magento's JS app will wait for page onload event
• After page onload, Magento's JS app will collect data-mage-init attributes
• Magento's JS app with RequireJS will load bootstrap.js and executes it
• If bootstrap.js depends on jQuery but doesn't contain explicit dependency on 'jquery' module it fails. Actually no. Magento's JS app depends on jQuery itself. So jQuery will be load anyway before bootstrap.js executes. So it is a type of lucky.
• Magento's JS app will try to execute something, that bootstrap.js returns. This callback will receive parsed object from mage-init JSON as config, and reference on DOM node <div data-mage-init..> as element.