Magento2では、<script type =“ text / x-magento-init”>とは何ですか?


29

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

これはと行うことですKnockoutJSRequireJS?これらの呼び出しは何で、この新しいスクリプトタグは何ですか<script type="text/x-magento-init">


1
この質問が投稿された後、一部のドキュメントは、おそらく追加:devdocs.magento.com/guides/v2.0/javascript-dev-guide/javascript/...
nevvermind

回答:


29

「スクリプトタイプ」の一般的な使用法

<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動作を設定する方法であると推測します。テンプレートの1つに
を追加し、<script type="text/x-magento-init">テンプレートをページに含めるだけで、magentoは動作を「自動的に」適切な要素に移動します。


このスクリプトを削除しようとしましたapp/design/frontend/package/template/Magento_Catalog/templates/product/view/gallery.phtmlが、うまくいきませんでした。製品拡大鏡や製品ギャラリー(正確にはフォトラマ)などのデフォルトの動作を削除するためのアドバイスはありますか?
ジャナカドンバウェラ

JSコンポーネントの初期化が見つからないという警告が表示されました。\ "x-magento-init \"または\ "x-magento-template \"を使用します。phtmlファイルで<script>タグを使用しているとき、それを解決する方法。
サンジェイゴヒル

皆さん、data-mage-initでこの受け渡しパラメーターをどのように使用できますか?そして、それはどのように結果を返しますか?
Camit1dk

9

加えて、

vendor \ magento \ magento2-base \ lib \ web \ mage \ apply \ scripts.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の機能は、Magento JavaScriptコンポーネントを作成できることです。

Magento Javascriptコンポーネントは、関数を返すRequireJSモジュールです。

Magentoは、text/x-magento-init*属性を持つスクリプトタグに遭遇します。

1]指定されたRequireJSモジュール(Magento_Ui / js / core / app)を初期化します

2]そのモジュールによって返された関数を呼び出し、データオブジェクトを渡します

それが役に立てば幸い

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.