Saya baru mengenal Magento2 dan organisasi kami baru saja mendapatkan lisensi EE. Saya telah menginstalnya di mesin lokal saya dan templat default meludahkan campuran berikut dengan HMTL:

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

Dan panggilan seperti

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

Apakah ini ada hubungannya dengan KnockoutJSatau RequireJS? Apa saja panggilan ini dan apa tag skrip baru ini<script type="text/x-magento-init">

Penggunaan umum "jenis skrip"

Saat menggunakan <script type="....">browser mengartikan hanya apa yang diketahuinya (seperti text/javascriptmisalnya).
Ada lagi yang diabaikan.
Pada dasarnya menggunakan tipe khusus Anda menambahkan informasi ke halaman tanpa menampilkannya dan tanpa browser menafsirkannya dan nanti Anda dapat menggunakan informasi itu seperti yang Anda inginkan.

Bagaimana Magento menggunakan ini

Magento menggunakan bagian-bagian ini setelah halaman dimuat.
Kode yang menggunakannya terletak di lib/web/mage/apply/scripts.js.
Saya tidak mengerti sepenuhnya apa file yang disebutkan di atas, tetapi ada komentar di dalam file yang menyatakan ini:

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

Kesimpulan / Spekulasi

Saya berspekulasi bahwa ini adalah cara untuk mengatur perilaku js yang berbeda untuk elemen yang berbeda di halaman tanpa perlu menulis ulang template yang berisi elemen.
Anda hanya perlu menambahkan a <script type="text/x-magento-init">di salah satu templat Anda, sertakan templat Anda di halaman dan magento "otomatis ajaib" memindahkan perilaku ke elemen yang tepat.

Tambahan,

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

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

Dengan menggunakan panduan di bawah ini

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

Sintaks Standar Adalah

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

Dengan merujuk

http://alanstorm.com/magento_2_javascript_init_scripts

http://alanstorm.com/magento_2_introducing_ui_components

Magento sendiri sering menggunakan x-magento-initmetode ini untuk memanggil modul RequireJS sebagai program. Namun, kekuatan sebenarnya x-magento-initadalah kemampuan untuk membuat Komponen Javascript Magento.

Komponen Magento Javascript adalah modul RequireJS yang mengembalikan fungsi.

Magento menemukan text/x-magento-inittag skrip dengan atribut *, itu akan

1] Inisialisasi modul RequireJS yang ditentukan (Magento_Ui / js / core / app)

2] Panggil fungsi yang dikembalikan oleh modul itu, meneruskan objek data

Semoga ini bisa membantu