Soy nuevo en Magento2 y nuestra organización acaba de obtener la licencia EE. Lo instalé en mi máquina local y la plantilla predeterminada escupe lo siguiente mezclado con HMTL:

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

Y llama como

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

¿Esto tiene que ver con KnockoutJSo RequireJS? ¿Qué son estas llamadas y cuál es esta nueva etiqueta de script?<script type="text/x-magento-init">

Uso general del "tipo de script"

Cuando usa <script type="....">el navegador, solo interpreta lo que sabe (como, text/javascriptpor ejemplo).
Cualquier otra cosa es ignorada.
Básicamente, al usar un tipo personalizado, está agregando información a la página sin mostrarla y sin que el navegador la interprete, y luego puede usar esa información como desee.

Cómo usa Magento esto

Magento usa estas secciones después de que se carga la página.
El código que los usa se encuentra en lib/web/mage/apply/scripts.js.
No entiendo completamente lo que hace el archivo mencionado anteriormente, pero hay un comentario dentro del archivo que dice esto:

/**
 * 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"}
 *          }
 *      }
 */

Conclusión / especulación

Especulo que esta es una forma de establecer diferentes comportamientos js para diferentes elementos en la página sin la necesidad de reescribir la plantilla que contiene los elementos.
Solo necesita agregar una <script type="text/x-magento-init">en una de sus plantillas, incluir su plantilla en la página y magento "auto-mágicamente" mueve el comportamiento al elemento correcto.

Adicionalmente,

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

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

Mediante el uso de las siguientes guías

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

La sintaxis estándar es

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

Refiriéndose

http://alanstorm.com/magento_2_javascript_init_scripts

http://alanstorm.com/magento_2_introducing_ui_components

Magento a menudo usa el x-magento-initmétodo para invocar un módulo RequireJS como programa. Sin embargo, el verdadero poder de x-magento-inites la capacidad de crear un componente Javascript Magento.

Los componentes Javascript de Magento son módulos RequireJS que devuelven una función.

Magento encuentra una text/x-magento-initetiqueta de script con un atributo *, lo hará

1] Inicialice el módulo RequireJS especificado (Magento_Ui / js / core / app)

2] Llame a la función devuelta por ese módulo, pasando el objeto de datos

Espero eso ayude