I am new to Magento2 and our organisation has just get the EE licence. I have installed it on my local machine and the default template spits out the following mixed in with HMTL:
<script type="text/x-magento-init">
{
"*": {
"Magento_Ui/js/core/app": {
"components": {
"customer": {
"component": "Magento_Customer/js/view/customer"
}
}
}
}
}
</script>
And calls like
<script type="text/x-magento-init">
{
"*": {
"Magento_Ui/js/core/app": {
"components": {
"messages": {
"component": "Magento_Theme/js/view/messages"
}
}
}
}
}
</script>
Is this to do with KnockoutJS
or RequireJS
? What are these calls and what is this new script tag <script type="text/x-magento-init">
Best Answer
General usage of "script type"
When using
<script type="....">
the browser interprets only what it knows (liketext/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:
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.