क्या करता है displayAreaऔर providerकी checkout_index_index.xmlmagento2 में मतलब?
क्या करता है displayAreaऔर providerकी checkout_index_index.xmlmagento2 में मतलब?
जवाबों:
क्या समझने के लिए checkoutProviderऔर displayAreaकर रहे हैं, तो आपको पहले गुंजाइश आप में देख रहे हैं समझना चाहिए: jsLayout।
jsLayoutचेकआउट पृष्ठ पर जावास्क्रिप्ट UI तत्वों के लिए जावास्क्रिप्ट विन्यास का एक गुच्छा है। यदि आप देखते हैं module-checkout/view/frontend/templates/onepage.phtml, तो आप निम्नलिखित को नोटिस करेंगे x-magento-init:
<script type="text/x-magento-init">
{
"#checkout": {
"Magento_Ui/js/core/app": <?php /* @escapeNotVerified */ echo $block->getJsLayout();?>
}
}
</script>
यह वह जगह है जहाँ यह सब शुरू होता है। य़ह कहता है:
तत्व के लिए
#checkout,Magento_Ui/js/core/appनिम्नलिखित जानकारी के साथ -component को प्रारंभ करें : ...
और यह जो जानकारी प्राप्त करता है वह लेआउट XML में बनाई गई जानकारी है jsLayout:। अब, इसका मतलब है कि आपके एक्सएमएल में सब कुछ अब Magento_Ui/js/core/app-component (प्लगइन्स को छोड़कर, और लेआउट प्रोसेसर और पल के लिए समीकरण से बाहर सामान ...) से होकर गुजरा है।
अब, मैं विस्तार में नहीं जा रहा हूं कि कैसे module-ui/view/base/web/js/core/app.jsसब कुछ उबलता है, क्योंकि यह इस पद को बहुत लंबा, बहुत लंबा कर देगा, लेकिन सारांश यह है:
Magento_Ui/js/core/appघटक एक बनाता है checkoutघटक।uiComponent(यह एक बहुत ही सामान्य घटक है जिसका उपयोग आपके अपने कस्टम UI घटकों को स्थगित करने के लिए किया जा सकता है। यह मूल नॉकआउट टेम्पलेट रेंडरिंग और सामान के साथ आता है)।Magento_Checkout/web/frontend/template/onepage.html।errors, estimation, steps, आदि ...)steps-Child भी एक हो जाएगा uiComponent।अब अपने displayAreaऔर provider-सुरक्षा पाने के लिए : जैसा कि आपने ऊपर देखा है, JavaScrip क्लासेस के लिए सब कुछ मैप करता है। पहली बार जब हम देखते हैं कि displayAreaहम stepsकिस प्रकार से -component बनाते हैं , जो कि प्रकार का है uiComponent। तो uiComponentइसका उपयोग करने के लिए एक तार्किक उम्मीदवार होगा displayArea।
अब, एक uiComponentजावास्क्रिप्ट प्रकार का एक वर्ग है Magento_Ui/js/lib/core/collection। (आप इसे ऊपर देख सकते हैं module-ui/view/base/requirejs-config.js)। यह करने के लिए नक्शे module-ui/view/base/web/js/lib/core/collection.js। यहाँ हम निम्नलिखित उपयोग देखते हैं:
/**
* Synchronizes multiple elements arrays with a core '_elems' container.
* Performs elemets grouping by theirs 'displayArea' property.
* @private
*
* @returns {Collection} Chainable.
*/
_updateCollection: function () {
var _elems = compact(this._elems),
grouped;
grouped = _elems.filter(function (elem) {
return elem.displayArea && _.isString(elem.displayArea);
});
grouped = _.groupBy(grouped, 'displayArea');
_.each(grouped, this.updateRegion, this);
this.elems(_elems);
return this;
},तो यह क्या प्रभाव डालता है, यह यूआई घटकों के एक निश्चित समूह के लिए एक uiComponent को 'मैप' करता है। यह जानना महत्वपूर्ण है, क्योंकि यह हमें लेआउट में अन्य स्थानों पर यूआई घटकों को स्थानांतरित करने की अनुमति देता है, बस XML लेआउट में हेरफेर करके, जैसे आप phtmlटेम्प्लेट के साथ ऐसा करेंगे जो सर्वर-साइड प्रदान किए जाते हैं। बस ओवरराइड करें displayArea, और आप किसी भी जावास्क्रिप्ट UI घटक को कहीं और भी रेंडर कर सकते हैं (यह देखते हुए कि लक्ष्य क्षेत्र भी कहीं न कहीं प्रदान किया गया है)।
अब आप अपने दूसरे प्रश्न के लिए: provider। जैसे हमने देखा है displayArea, हमें पहले यूआई घटक को देखना शुरू करना चाहिए, जो कि है Magento_Checkout/js/view/form/element/email। और अगर हम देखें requirejs-config.js, तो हम अंत में पाते हैं module-checkout/view/frontend/web/js/view/form/element/email.js।
लेकिन ... providerइस वर्ग में कोई उपयोग नहीं किया जाता है। तो आइए देखें कि क्या हम उस वर्ग में कुछ भी पा सकते हैं Componentजिसका विस्तार होता है: (जो हमारा uiComponentफिर से - वर्ग है)।
लेकिन ... नहीं providerभी। ठीक है, uiComponentबस फैली हुई है Element(जो स्थित है module-ui/view/base/web/js/lib/core/element/element.js), तो चलो बस वहाँ पर देखो:
/**
* Parses 'modules' object and creates
* async wrappers for specified components.
*
* @returns {Element} Chainable.
*/
initModules: function () {
_.each(this.modules, function (name, property) {
if (name) {
this[property] = this.requestModule(name);
}
}, this);
if (!_.isFunction(this.source)) {
this.source = registry.get(this.provider);
}
return this;
},बिंगो! यह पता चला है कि प्रदाता को डेटा लाने के लिए स्रोत के रूप में उपयोग किया जाता है। यदि हम कंस्ट्रक्टर को Elementदेखते हैं, तो आप देखेंगे कि डिफ़ॉल्ट रूप से, यह खाली करने के लिए सेट है:
provider: '',तो वापस हमारे विन्यास के लिए। यदि हम अब अपने कॉन्फ़िगरेशन को पढ़ते हैं, तो हम समझेंगे कि आइटम shippingAddressएक घटक है Magento_Checkout/js/view/shipping, जो इसका डेटा प्राप्त करता है checkoutProvider।
ताकि हमें दो सवालों का सामना करना पड़े:
checkoutProviderपरिभाषित किया गया है?यदि आप नीचे तक स्क्रॉल करेंगे, तो आप checkout_index_index.xmlदेखेंगे कि यह एक वेनिला से ज्यादा कुछ नहीं है uiComponent:
<item name="checkoutProvider" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
</item>और यदि आप देखते हैं module-checkout/view/frontend/web/js/view/shipping.js, तो आप देखेंगे कि इसका उपयोग इस तरह किया जाता है:
registry.async('checkoutProvider')(function (checkoutProvider) {
var shippingAddressData = checkoutData.getShippingAddressFromData();
if (shippingAddressData) {
checkoutProvider.set(
'shippingAddress',
$.extend({}, checkoutProvider.get('shippingAddress'), shippingAddressData)
);
}
checkoutProvider.on('shippingAddress', function (shippingAddressData) {
checkoutData.setShippingAddressFromData(shippingAddressData);
});
});ईमानदार होने के लिए: यह वह जगह है जहां मेरा विश्लेषण रुक जाता है, क्योंकि यह मेरे लिए भी खोज और निवेश करना मुश्किल है कि क्या हो रहा है, लेकिन मुझे आशा है कि कोई और इसे यहां से उठा सकता है ...
मुझे पता है कि इसे registry.async()वापस करने की विधि के साथ कुछ करना है जो तुरंत कॉलबैक फ़ंक्शन के साथ तर्क के रूप में निष्पादित हो जाता है, लेकिन किसी और को यह समझाने की आवश्यकता है ...
* अस्वीकरण: हर तरह से, कृपया मुझे सही करें अगर मैं गलत हूँ! उपरोक्त में से किसी को भी असली के लिए आज़माया नहीं गया है, लेकिन मैं लगभग 2 साल से मैजेंटो 2 के साथ काम कर रहा हूं और मेरा मानना है कि यह कैसे काम करता है। दुर्भाग्य से वहाँ बहुत दस्तावेज नहीं है अगर आप Magento महासागर के नीचे गोता लगाना चाहते हैं।
मेरे मूल जवाब के 6 महीने बाद मुझे लगता है कि मैं क्या displayAreaहै, इस बारे में बेहतर जवाब दे सकता हूं ।
मेरी समझ में, यह सभी नॉकआउट्स getTemplate()-मैथोड, getRegion()-मैथोड और यूआई कंपोनेंट्स के बच्चों के साथ आता है । इसका एक अच्छा उदाहरण तब देखा जा सकता है जब आप परीक्षा दे रहे हों vendor/magento/module-checkout/view/frontend/templates/registration.phtmlऔर vendor/magento/module-checkout/view/frontend/web/template/registration.html।
में registration.phtml, आप एक डिफ़ॉल्ट Magento UI घटक देखेंगे जिसमें बच्चे हैं:
<script type="text/x-magento-init">
{
"#registration": {
"Magento_Ui/js/core/app": {
"components": {
"registration": {
"component": "Magento_Checkout/js/view/registration",
"config": {
"registrationUrl": "<?php /* @escapeNotVerified */ echo $block->getCreateAccountUrl(); ?>",
"email": "<?php /* @escapeNotVerified */ echo $block->getEmailAddress(); ?>"
},
"children": {
"errors": {
"component": "Magento_Ui/js/view/messages",
"sortOrder": 0,
"displayArea": "messages",
"config": {
"autoHideTimeOut": -1
}
}
}
}
}
}
}
}
</script>नोट के उपयोग displayAreaमें children-node। मूल रूप से, यह नॉकआउट को बताता है कि इस बाल तत्व को 'संदेश' नामक क्षेत्र में प्रदान किया जाना चाहिए ।
अब इसके शीर्ष पर एक नज़र डालें registration.html:
<!-- ko foreach: getRegion('messages') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->मूल रूप से नॉकआउट कोड की यह रेखा क्या है: यह उन सभी बाल तत्वों पर आधारित है जो प्रदर्शन 'संदेश' में मौजूद हैं , और उन्हें प्रस्तुत करता है।
मूल रूप से, नामकरण थोड़ा भ्रमित करने वाला है यदि आप मुझसे पूछें। आप एक स्थान पर 'डिस्प्लेएरिया' और दूसरी जगह 'क्षेत्र' का उपयोग क्यों करेंगे । लेकिन शायद मेरी यह धारणा पूरी तरह से गलत है। शायद एक Magento कोर डेवलपर इस पर थोड़ा और प्रकाश चमक सकता है?
getRegionहूं और मेरा दिमाग बस फंस जाता है। वैसे दोनों उत्तर के लिए धन्यवाद, बहुत मददगार!