In Magento2 what is <script type="text/x-magento-init">?
General usage of "script type"
When using <script type="....">
the browser interprets only what it knows (like text/javascript
for example).
Anything else is ignored.
Basically using a custom type you are adding information to the page without displaying it and without the browser interpreting it and you can later use that information as you want.
How Magento uses this
Magento uses these sections after the page loads.
The code that uses them is located in lib/web/mage/apply/scripts.js
.
I don't understand completely what the file mentioned above does, but there is a comment inside the file that states this:
/**
* Parses 'script' tags with a custom type attribute and moves it's data
* to a 'data-mage-init' attribute of an element found by provided selector.
* Note: All found script nodes will be removed from DOM.
*
* @returns {Array} An array of components not assigned to the specific element.
*
* @example Sample declaration.
* <script type="text/x-magento-init">
* {
* "body": {
* "path/to/component": {"foo": "bar"}
* }
* }
* </script>
*
* @example Providing data without selector.
* {
* "*": {
* "path/to/component": {"bar": "baz"}
* }
* }
*/
Conclusion / Speculation
I speculate that this is a way to set different js behaviour to different elements in the page without the need to rewrite the template that contains the elements.
You only need to add a <script type="text/x-magento-init">
in one of your templates, include your template in the page and magento "auto-magically" moves the behavior to the right element.
In Addition,
vendor\magento\magento2-base\lib\web\mage\apply\scripts.js
var scriptSelector = 'script[type="text/x-magento-init"]',
dataAttr = 'data-mage-init',
virtuals = [];
By using below guides
http://devdocs.magento.com/guides/v2.1/javascript-dev-guide/javascript/js_init.html
Standard Syntax Is
<script type="text/x-magento-init">
{
// components initialized on the element defined by selector
"<element_selector>": {
"<js_component1>": ...,
"<js_component2>": ...
},
// components initialized without binding to an element
"*": {
"<js_component3>": ...
}
}
</script>
By referring
http://alanstorm.com/magento_2_javascript_init_scripts
http://alanstorm.com/magento_2_introducing_ui_components
Magento itself often uses the x-magento-init
method to invoke a RequireJS module as a program. However, the real power of x-magento-init
is the ability to create a Magento Javascript Component.
Magento Javascript Components are RequireJS modules that return a function.
Magento encounters a text/x-magento-init
script tag with an * attribute, it will
1] Initialize the specified RequireJS module (Magento_Ui/js/core/app)
2] Call the function returned by that module, passing in the data object
Hope it helps