Je suis nouveau sur Magento2 et notre organisation vient d'obtenir la licence EE. Je l'ai installé sur ma machine locale et le modèle par défaut crache ce qui suit mélangé avec HMTL:

<script type="text/x-magento-init">
{
    "*": {
        "Magento_Ui/js/core/app": {
            "components": {
                "customer": {
                    "component": "Magento_Customer/js/view/customer"
                }
            }
        }
    }
}
</script>

Et appelle comme

<script type="text/x-magento-init">
{
"*": {
    "Magento_Ui/js/core/app": {
        "components": {
                "messages": {
                    "component": "Magento_Theme/js/view/messages"
                }
            }
        }
    }
}
</script>

Est-ce à voir avec KnockoutJSou RequireJS? Quels sont ces appels et quelle est cette nouvelle balise de script<script type="text/x-magento-init">

Utilisation générale du "type de script"

Lors de l'utilisation <script type="....">du navigateur interprète uniquement ce qu'il sait (comme text/javascriptpar exemple).
Tout le reste est ignoré.
Fondamentalement, en utilisant un type personnalisé, vous ajoutez des informations à la page sans l'afficher et sans que le navigateur l'interprète et vous pourrez ensuite utiliser ces informations comme vous le souhaitez.

Comment Magento utilise cela

Magento utilise ces sections après le chargement de la page.
Le code qui les utilise se trouve dans lib/web/mage/apply/scripts.js.
Je ne comprends pas complètement ce que fait le fichier mentionné ci-dessus, mais il y a un commentaire à l'intérieur du fichier qui dit ceci:

/**
 * 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 / spéculation

Je suppose que c'est un moyen de définir un comportement js différent pour différents éléments de la page sans avoir à réécrire le modèle qui contient les éléments.
Il vous suffit d'ajouter un <script type="text/x-magento-init">dans l'un de vos modèles, d'inclure votre modèle dans la page et magento déplace "automatiquement" le comportement vers le bon élément.

En outre,

fournisseur \ magento \ magento2-base \ lib \ web \ mage \ apply \ scripts.js

var scriptSelector = 'script[type="text/x-magento-init"]',
        dataAttr = 'data-mage-init',
        virtuals = [];

En utilisant les guides ci-dessous

http://devdocs.magento.com/guides/v2.1/javascript-dev-guide/javascript/js_init.html

La syntaxe standard est

<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>

En se référant

http://alanstorm.com/magento_2_javascript_init_scripts

http://alanstorm.com/magento_2_introducing_ui_components

Magento lui-même utilise souvent la x-magento-initméthode pour appeler un module RequireJS en tant que programme. Cependant, la véritable puissance de x-magento-initest la possibilité de créer un composant Javascript Magento.

Les composants Javascript Magento sont des modules RequireJS qui renvoient une fonction.

Magento rencontre une text/x-magento-initbalise de script avec un attribut *, il

1] Initialiser le module RequireJS spécifié (Magento_Ui / js / core / app)

2] Appelez la fonction retournée par ce module, en passant l'objet de données

J'espère que ça aide