लाइटनिंग वेब कंपोनेंट (LWC) के पास घटक/घटकों को DOM में डालने, उसे रेंडर करने और DOM से घटक/घटकों को हटाने के लिए अपना स्वयं का जीवनचक्र है। कनेक्टेडकॉलबैक() (माउंटिंग चरण में) जीवनचक्र विधियों में से एक है जिसे DOM में घटक डालने पर सक्रिय किया जाता है। इस गाइड में, हम उदाहरण के साथ कनेक्शनकॉलबैक() और इस विधि को शामिल करने वाले विभिन्न परिदृश्यों पर चर्चा करेंगे।
- कंस्ट्रक्टर() जीवनचक्र हुक में पहली विधि है जिसे 'घटक' उदाहरण बनाते समय कहा जाता है। इस चरण में घटक गुण तैयार नहीं होंगे. यदि आप होस्ट तत्व तक पहुंचना चाहते हैं, तो हमें 'this.template' का उपयोग करना होगा। चूँकि इस चरण में चाइल्ड घटक मौजूद नहीं होंगे, हम चाइल्ड घटकों तक भी पहुँचने में असमर्थ हैं। इस विधि में Super() का प्रयोग किया जाता है।
- कनेक्टेडकॉलबैक() दूसरी विधि (चरण 2) है जिसे DOM में कोई तत्व डालने पर कॉल किया जाता है। इस मामले में, हुक माता-पिता से बच्चे की ओर प्रवाहित होता है। इस चरण में घटक गुण तैयार नहीं होंगे. यदि आप होस्ट तत्व तक पहुंचना चाहते हैं, तो हमें 'this.template' का उपयोग करना होगा। चूँकि इस चरण में चाइल्ड घटक मौजूद नहीं होंगे, हम चाइल्ड घटकों तक भी पहुँचने में असमर्थ हैं।
- प्रदान करना (): विस्तारित चरण प्रतिपादन कर रहा है। मूल घटक प्रस्तुत किया जाता है और फिर यदि बच्चा घटक मौजूद है तो उसे प्रस्तुत किया जाएगा। पैरेंट को रेंडर करने के बाद, यह चाइल्ड कंपोनेंट (कन्स्ट्रक्टर, कनेक्टेडकॉलबैक, रेंडर) पर जाता है और पैरेंट के समान चरणों का पालन करता है।
- रेंडर्डकॉलबैक (): जब कंपोनेंट का रेंडरिंग पूरा हो जाता है और आप इसके बाद कोई ऑपरेशन करना चाहते हैं, तो इस विधि को कहा जाता है।
- डिस्कनेक्ट किया गया कॉलबैक (): इस चरण में, तत्व को DOM से हटा दिया जाता है (कनेक्टेडकॉलबैक() के विपरीत)।
- जब जीवनचक्र में त्रुटि होती है तो errorCallback() को कॉल किया जाता है।
कनेक्टेडकॉलबैक() संरचना
कनेक्टेडकॉलबैक() का उपयोग करना:
- एक वेरिएबल को परिभाषित करें और एक संपत्ति मूल्य निर्धारित करें।
- इसके अंदर एपेक्स को बुलाओ।
- ईवेंट बनाएं और भेजें.
- यूआई एपीआई को कॉल किया जा सकता है।
- इसके अंदर नेविगेशन सेवा।
इसे निम्नलिखित की तरह जावास्क्रिप्ट फ़ाइल में निर्दिष्ट करना होगा:
कनेक्टकॉलबैक ( ) {
// करना…
}
सभी उदाहरण इस 'meta.xml' फ़ाइल का उपयोग करते हैं। हम इसे प्रत्येक उदाहरण में निर्दिष्ट नहीं करेंगे. LWC घटकों को आपके रिकॉर्ड पेज, ऐप पेज और होम पेज पर जोड़ा जा सकता है।
संस्करण = '1.0' ?>
<लक्ष्य>
<लक्ष्य> बिजली__रिकॉर्डपेज < / लक्ष्य>
<लक्ष्य> बिजली__ऐपपेज < / लक्ष्य>
<लक्ष्य> बिजली__होमपेज < / लक्ष्य>
< / लक्ष्य>
< / लाइटनिंगकंपोनेंटबंडल>
उदाहरण 1:
जब घटक यूआई पर लोड किया जाता है तो हम कंस्ट्रक्टर() और कनेक्टेडकॉलबैक() चरण का प्रदर्शन करेंगे।
कनेक्टेडCallBack.html
<टेम्पलेट><लाइटनिंग-कार्ड शीर्षक = 'कनेक्टेडकॉलबैक' >
< / लाइटनिंग-कार्ड>
< / टेम्पलेट>
कनेक्टेडकॉलबैक.जेएस
// माउंटिंग चरण - कंस्ट्रक्टर()निर्माता ( ) {
बहुत अच्छा ( )
सांत्वना देना। लकड़ी का लट्ठा ( 'कंस्ट्रक्टर को बुलाया गया' )
}
// माउंटिंग चरण - कनेक्टेडकॉलबैक()
कनेक्टकॉलबैक ( ) {
सांत्वना देना। लकड़ी का लट्ठा ( 'कनेक्टेडकॉलबैक कहा गया' )
}
यह निम्नलिखित जैसा दिखता है:
आउटपुट:
इस घटक को किसी भी ऑब्जेक्ट के 'रिकॉर्ड' पृष्ठ पर जोड़ें।
पृष्ठ का निरीक्षण करें (बाएं क्लिक करें और 'निरीक्षण करें' चुनें)। फिर, 'कंसोल' टैब पर जाएं।
उदाहरण 2:
इस उदाहरण में, हम ट्रैक डेकोरेटर के साथ एक फल बनाएंगे और कनेक्टेडकॉलबैक() विधि के अंदर संपत्ति मूल्य को 'मैंगो' पर सेट करेंगे। यह यूआई पर प्रदर्शित होता है.
पहला उदाहरण.html
<टेम्पलेट><लाइटनिंग-कार्ड शीर्षक = 'सेटिंग गुण' >
< डिव कक्षा = 'slds-var-एम-अराउंड_मीडियम' >
< बी > फल का नाम: < / बी > {फल}
< / डिव >
< / लाइटनिंग-कार्ड>
< / टेम्पलेट>
पहला उदाहरण.जे.एस
आयात { बिजली तत्त्व , रास्ता } से 'भाग्य' ;निर्यात गलती करना कक्षा पहला उदाहरण का विस्तार बिजली तत्त्व {
@ ट्रैक फल ;
कनेक्टकॉलबैक ( ) {
// संपत्ति का मूल्य मैंगो पर सेट करना
यह . फल = 'आम' ;
}
}
आउटपुट:
इस घटक को किसी भी ऑब्जेक्ट के 'रिकॉर्ड' पृष्ठ पर जोड़ें। यहां हम इसे 'खाता रिकॉर्ड' पृष्ठ पर जोड़ते हैं। आप देखेंगे कि फल 'आम' है।
उदाहरण 3:
पिछले कोड का उपयोग करें और 'js' और 'html' फ़ाइल में कुछ कथन संशोधित करें।
एक नया वेरिएबल बनाएं जो 'js' फ़ाइल में 500 के साथ 'संख्या' है। यदि संख्या 500 से अधिक है तो फल को '500 से अधिक' पर सेट करें। अन्यथा, फल को '500 के बराबर' पर सेट करें।
पहला उदाहरण.html
<टेम्पलेट><लाइटनिंग-कार्ड शीर्षक = 'सेटिंग गुण' >
< डिव कक्षा = 'slds-var-एम-अराउंड_मीडियम' >
< बी > लागत: < / बी > {फल}
< / डिव >
< / लाइटनिंग-कार्ड>
< / टेम्पलेट>
पहला उदाहरण.जे.एस
@ ट्रैक फल ;कनेक्टकॉलबैक ( ) {
चलो नंबर = 500 ;
अगर ( संख्या > 500 ) {
यह . फल = '500 से अधिक' ;
}
अन्य {
यह . फल = '500 के बराबर' ;
}
}
आउटपुट:
संख्या 500 है। इसलिए, फल का परिणाम '500 के बराबर' है।
उदाहरण 4:
इस परिदृश्य में, हम कनेक्टेडकॉलबैक() विधि का उपयोग करके खाता रिकॉर्ड (खाता ऑब्जेक्ट) लौटाते हैं।
- सबसे पहले, हम एक एपेक्स क्लास लिखते हैं जो आईडी, नाम, उद्योग और रेटिंग फ़ील्ड के साथ पहले 10 खातों की सूची लौटाता है
- इसके बाद, हम खातों को ट्रैक करते हैं और उन्हें एपेक्स क्लास से विधि को कॉल करके कनेक्टेडकॉलबैक() विधि में वापस करते हैं।
- HTML फ़ाइल में, हम इसका उपयोग प्रत्येक निर्देश के लिए करते हैं जो खातों को पुनरावृत्त करता है और नाम और उद्योग लौटाता है।
अकाउंटडेटा.apxc
शेयरिंग क्लास अकाउंटडेटा के साथ सार्वजनिक {@AuraEnabled(कैशेबल=सही)
सार्वजनिक स्थैतिक सूची<खाता> returnAcc(){
सूची <खाता> खाता सूची = [खाता सीमा 10 से आईडी, नाम, उद्योग, रेटिंग चुनें];
वापसी खाता सूची;
}
}
दूसरा उदाहरण.html
<टेम्पलेट><लाइटनिंग-कार्ड शीर्षक = 'खातों की प्रदर्शन सूची' >
< डिव कक्षा = 'slds-var-एम-अराउंड_मीडियम' >
<टेम्पलेट यदि: सत्य = { हिसाब किताब } >
<टेम्पलेट के लिए :प्रत्येक = { हिसाब किताब } के लिए :वस्तु = 'account_rec' >
< पी चाबी = { खाता_rec. पहचान } < बी > खाता: < / बी > {account_rec.Name} < बी > उद्योग: < / बी > {account_rec.Industry} < / पी >
< / टेम्पलेट>
< / टेम्पलेट>
< / डिव >
< / लाइटनिंग-कार्ड>
< / टेम्पलेट>
दूसरा उदाहरण.जे.एस
एपेक्स से रिटर्नएसीसी आयात करें कक्षा :आयात रिटर्नएसीसी से '@salesforce/apex/AccountData.returnAcc' ;
लिखना यह 'जेएस' के भीतर कोड कक्षा :
@ खातों को ट्रैक करें ;
@ ट्रैक त्रुटि ;
कनेक्टकॉलबैक ( ) {
रिटर्नएसीसी ( )
// खाते लौटाएं
. तब ( परिणाम => {
यह . हिसाब किताब = परिणाम ;
यह . गलती = अपरिभाषित ;
} )
. पकड़ना ( गलती => {
यह . गलती = गलती ;
यह . हिसाब किताब = अपरिभाषित ;
} ) ;
}
आउटपुट:
पहले 10 खाता रिकॉर्ड खाता नाम और उद्योग के साथ लौटाए जाते हैं।
निष्कर्ष
अब, आप LWC में एपेक्स डेटा के साथ काम करते समय ज्यादातर मामलों में कनेक्टेडकॉलबैक() विधि का उपयोग कर सकते हैं। इस गाइड में, हमने चर्चा की कि कनेक्टेडकॉलबैक() का उपयोग करके संपत्ति का मूल्य कैसे निर्धारित किया जाए और इसमें एपेक्स को शामिल किया जाए। बेहतर समझ के लिए, हमने पहले एक उदाहरण प्रदान किया जिसमें कंस्ट्रक्टर() और कनेक्टेडकॉलबैक() विधियां दिखाई गईं। आपको अपने वेबपेज का निरीक्षण करना होगा और उसे कंसोल में देखना होगा।