Ich bin neu bei Magento2 und unsere Organisation hat gerade die EE-Lizenz erhalten. Ich habe es auf meinem lokalen Computer installiert und die Standardvorlage gibt das Folgende gemischt mit HMTL aus:

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

Und ruft gerne an

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

Hat das was mit KnockoutJSoder zu tun RequireJS? Was sind diese Aufrufe und was ist das neue Skript-Tag<script type="text/x-magento-init">

Allgemeine Verwendung von "Skripttyp"

Bei der Verwendung <script type="....">des Browsers wird nur das interpretiert, was er kennt (wie text/javascriptzum Beispiel).
Alles andere wird ignoriert.
Mit einem benutzerdefinierten Typ fügen Sie der Seite Informationen hinzu, ohne sie anzuzeigen und ohne dass der Browser sie interpretiert. Sie können diese Informationen später nach Belieben verwenden.

Wie Magento das nutzt

Magento verwendet diese Abschnitte nach dem Laden der Seite.
Der Code, der sie verwendet, befindet sich in lib/web/mage/apply/scripts.js.
Ich verstehe nicht ganz, was die oben genannte Datei bewirkt, aber es gibt einen Kommentar in der Datei, der Folgendes besagt:

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

Schlussfolgerung / Spekulation

Ich spekuliere, dass dies eine Möglichkeit ist, das Verhalten von js für verschiedene Elemente auf der Seite festzulegen, ohne dass die Vorlage, die die Elemente enthält, neu geschrieben werden muss.
Sie müssen nur <script type="text/x-magento-init">eine Ihrer Vorlagen hinzufügen , Ihre Vorlage in die Seite einfügen und magento verschiebt das Verhalten "automatisch" auf das richtige Element.

Zusätzlich,

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

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

Unter Verwendung der folgenden Anleitungen

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

Standardsyntax ist

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

In Bezug auf

http://alanstorm.com/magento_2_javascript_init_scripts

http://alanstorm.com/magento_2_introducing_ui_components

Magento selbst verwendet oft die x-magento-initMethode, um ein RequireJS-Modul als Programm aufzurufen. Die eigentliche Stärke von x-magento-initist jedoch die Fähigkeit, eine Magento Javascript-Komponente zu erstellen.

Magento Javascript-Komponenten sind RequireJS-Module, die eine Funktion zurückgeben.

Magento trifft auf ein text/x-magento-initSkript-Tag mit einem * -Attribut

1] Initialisiere das angegebene RequireJS-Modul (Magento_Ui / js / core / app)

2] Rufen Sie die von diesem Modul zurückgegebene Funktion auf und übergeben Sie das Datenobjekt

Ich hoffe es hilft