Я новачок у Magento2, і наша організація щойно отримала ліцензію EE. Я встановив його на своїй локальній машині, і шаблон за замовчуванням виписує наступне, змішане з HMTL:

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

І дзвінки як

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

Це стосується KnockoutJSабо RequireJS? Що це за дзвінки та що це за новий тег сценарію<script type="text/x-magento-init">

Загальне використання "типу сценарію"

При використанні <script type="....">браузера інтерпретує лише те, що він знає (наприклад, text/javascriptнаприклад).
Все інше ігнорується.
В основному, використовуючи спеціальний тип, ви додаєте інформацію на сторінку, не відображаючи її та не переробляючи її веб-переглядачем, і ви зможете згодом використовувати цю інформацію як хочете.

Як Magento цим користується

Magento використовує ці розділи після завантаження сторінки.
Код, який їх використовує, знаходиться в lib/web/mage/apply/scripts.js.
Я не розумію повністю, що робить згаданий вище файл, але всередині цього файлу є коментар, який говорить про це:

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

Висновок / спекуляція

Я припускаю, що це спосіб встановити різні js поведінки на різні елементи сторінки без необхідності переписувати шаблон, який містить елементи.
Вам потрібно лише додати <script type="text/x-magento-init">в один із своїх шаблонів, включити свій шаблон на сторінку і magento "автоматично-магічно" переміщує поведінку на потрібний елемент.

В додаток,

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

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

Використовуючи нижче напрямні

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

Стандартний синтаксис є

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

Посилаючись

http://alanstorm.com/magento_2_javascript_init_scripts

http://alanstorm.com/magento_2_introducing_ui_components

Сам Magento часто використовує x-magento-initметод для виклику модуля RequireJS як програми. Однак реальна сила x-magento-init- це можливість створити компонент Jagent Javascript.

Компоненти Magento Javascript - це модулі RequireJS, які повертають функцію.

Magento стикається з text/x-magento-initтегом скрипту з атрибутом *, це буде

1] Ініціалізуйте вказаний модуль RequireJS (Magento_Ui / js / core / app)

2] Викликайте функцію, повернуту цим модулем, передаючи об'єкт даних

Сподіваюся, це допомагає