Magento2 में <script type = "text / x-magento-init"> क्या है?

Question

मैं Magento2 के लिए नया हूं और हमारे संगठन को केवल ईई लाइसेंस प्राप्त है। मैंने इसे अपनी स्थानीय मशीन पर स्थापित किया है और डिफ़ॉल्ट टेम्पलेट एचएमटीएल के साथ निम्नलिखित मिश्रित को बाहर करता है:

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

Comments

इस प्रश्न के पोस्ट होने के बाद संभवत: कुछ डॉक्स जोड़े गए: devdocs.magento.com/guides/v2.0/javascript-dev-guide/javascript/…

— nevvermind

Answer 1

"स्क्रिप्ट प्रकार" का सामान्य उपयोग

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

निष्कर्ष / अटकल

मैं अनुमान लगाता हूं कि यह पृष्ठ में अलग-अलग तत्वों के लिए अलग-अलग जेएस व्यवहार को सेट करने का एक तरीका है, जिसमें उन तत्वों को फिर से लिखना नहीं है जिनमें तत्व शामिल हैं।
आपको केवल <script type="text/x-magento-init">अपने किसी एक टेम्प्लेट में एक जोड़ने की जरूरत है , पेज और मैगनेटो में अपने टेम्पलेट को शामिल करें "ऑटो-मैजिकली" व्यवहार को सही तत्व पर ले जाता है।

Comments

मैंने इस स्क्रिप्ट को हटाने की कोशिश की app/design/frontend/package/template/Magento_Catalog/templates/product/view/gallery.phtmlलेकिन कोई किस्मत नहीं। उत्पाद आवर्धक और / या उत्पाद गैलरी (सटीक होने के लिए फ़ोटोरमा) जैसे डिफ़ॉल्ट व्यवहार को हटाने की कोई सलाह?

— जनक डोंबावेला

मुझे एक चेतावनी मिली जेएस घटक आरंभीकरण। \ "X-magento-init \" या \ "x-magento-template \" का उपयोग करें। जब मैं phtml फ़ाइल में <script> टैग का उपयोग कर रहा हूं तो इसे कैसे हल किया जाए।

— संजय गोहिल '

दोस्तों, क्या मैं डेटा-मेजी-इनिट में इस पासिंग पैरामीटर का उपयोग कैसे कर सकता हूं, इसके लिए कोई वास्तविक समय उदाहरण है? और यह कैसे परिणाम देगा?

— Camit1dk

Answer 2

के अतिरिक्त,

विक्रेता \ Magento \ magento2 आधार \ lib \ वेब \ दाना \ लागू \ 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एक कार्यक्रम के रूप में एक आवश्यकताएँ मॉड्यूल को लागू करने के लिए विधि का उपयोग करता है । हालाँकि, की वास्तविक शक्ति x-magento-initएक Magento जावास्क्रिप्ट कम्पोनेंट बनाने की क्षमता है।

Magento Javascript Components एक फ़ंक्शन को लौटाने वाले आवश्यकताएँ मॉड्यूल हैं।

Magento एक text/x-magento-initस्क्रिप्ट टैग का सामना * विशेषता के साथ करता है, यह होगा

1] निर्दिष्ट आवश्यकताएँ मॉड्यूल (Magento_Ui / js / core / app) को प्रारंभ करें

2] उस ऑब्जेक्ट द्वारा लौटाए गए फ़ंक्शन को कॉल करें, जो डेटा ऑब्जेक्ट में गुजर रहा है

आशा करता हूँ की ये काम करेगा