Jestem nowy w Magento2, a nasza organizacja właśnie otrzymała licencję EE. Zainstalowałem go na moim komputerze lokalnym i domyślny szablon wyrzuca następujące pomieszane z HMTL:

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

I połączenia jak

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

Czy to ma związek z KnockoutJSczy RequireJS? Co to są te wywołania i co to jest nowy skrypt<script type="text/x-magento-init">

Ogólne użycie „typu skryptu”

Podczas korzystania <script type="....">z przeglądarki interpretuje tylko to, co wie ( text/javascriptna przykład).
Wszystko inne jest ignorowane.
Zasadniczo za pomocą niestandardowego typu dodajesz informacje do strony bez ich wyświetlania i bez interpretacji przez przeglądarkę, a później możesz użyć tych informacji, jak chcesz.

Jak Magento tego używa

Magento używa tych sekcji po załadowaniu strony.
Kod, który ich używa, znajduje się w lib/web/mage/apply/scripts.js.
Nie do końca rozumiem, co robi wspomniany powyżej plik, ale w pliku znajduje się komentarz, który stwierdza:

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

Wnioski / spekulacje

Spekuluję, że jest to sposób na ustawienie różnych zachowań js dla różnych elementów na stronie bez konieczności przepisywania szablonu zawierającego te elementy.
Musisz tylko dodać <script type="text/x-magento-init">jeden z szablonów, dołączyć szablon na stronie, a magento „auto-magicznie” przenosi zachowanie do odpowiedniego elementu.

Dodatkowo,

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

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

Korzystając z poniższych przewodników

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

Standardowa składnia to

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

Przez odniesienie

http://alanstorm.com/magento_2_javascript_init_scripts

http://alanstorm.com/magento_2_introducing_ui_components

Sam Magento często używa tej x-magento-initmetody do wywołania modułu RequireJS jako programu. Jednak prawdziwą mocą x-magento-initjest możliwość tworzenia komponentu Javascript Magento.

Komponenty Magento Javascript to moduły RequireJS, które zwracają funkcję.

Magento napotka text/x-magento-inittag skryptu z atrybutem *, zrobi to

1] Zainicjuj określony moduł RequireJS (Magento_Ui / js / core / app)

2] Wywołaj funkcję zwróconą przez ten moduł, przekazując obiekt danych

Mam nadzieję, że to pomoże