లైట్నింగ్ వెబ్ కాంపోనెంట్ (LWC) DOMలో కాంపోనెంట్/లను చొప్పించడానికి, దాన్ని రెండర్ చేయడానికి మరియు DOM నుండి కాంపోనెంట్/లని తీసివేయడానికి దాని స్వంత లైఫ్‌సైకిల్‌ను కలిగి ఉంది. కనెక్ట్ చేయబడిన కాల్బ్యాక్() (మౌంటింగ్ దశలో) అనేది DOMలో కాంపోనెంట్‌ను చొప్పించినప్పుడు తొలగించబడే లైఫ్‌సైకిల్ పద్ధతుల్లో ఒకటి. ఈ గైడ్‌లో, మేము కనెక్షన్‌కాల్‌బ్యాక్() మరియు ఈ పద్ధతిని కలిగి ఉన్న విభిన్న దృశ్యాలను ఉదాహరణలతో చర్చిస్తాము.
- కన్స్ట్రక్టర్() అనేది లైఫ్‌సైకిల్ హుక్‌లోని మొదటి పద్ధతి, దీనిని “కాంపోనెంట్” ఉదాహరణ సృష్టించినప్పుడు అంటారు. ఈ దశలో కాంపోనెంట్ లక్షణాలు సిద్ధంగా ఉండవు. మీరు హోస్ట్ మూలకాన్ని యాక్సెస్ చేయాలనుకుంటే, మేము 'this.template'ని ఉపయోగించాలి. ఈ దశలో చైల్డ్ కాంపోనెంట్‌లు లేనందున, మేము చైల్డ్ కాంపోనెంట్‌లను కూడా యాక్సెస్ చేయలేము. ఈ పద్ధతిలో Super() ఉపయోగించబడుతుంది.
- కనెక్ట్ చేయబడిన కాల్బ్యాక్() అనేది రెండవ పద్ధతి (దశ 2), ఇది ఒక మూలకం DOMలోకి చొప్పించబడినప్పుడు పిలువబడుతుంది. ఈ సందర్భంలో, హుక్ తల్లిదండ్రుల నుండి పిల్లలకు ప్రవహిస్తుంది. ఈ దశలో కాంపోనెంట్ లక్షణాలు సిద్ధంగా ఉండవు. మీరు హోస్ట్ మూలకాన్ని యాక్సెస్ చేయాలనుకుంటే, మేము 'this.template'ని ఉపయోగించాలి. ఈ దశలో చైల్డ్ కాంపోనెంట్‌లు లేనందున, మేము చైల్డ్ కాంపోనెంట్‌లను కూడా యాక్సెస్ చేయలేము.
- రెండర్ (): ఎక్స్‌ట్ ఫేజ్ రెండరింగ్ అవుతోంది. పేరెంట్ కాంపోనెంట్ రెండర్ చేయబడింది మరియు చైల్డ్ కాంపోనెంట్ ఉంటే అది రెండర్ అవుతుంది. పేరెంట్‌ను రెండరింగ్ చేసిన తర్వాత, ఇది చైల్డ్ కాంపోనెంట్‌కి (కన్స్ట్రక్టర్, కనెక్ట్ చేయబడిన కాల్బ్యాక్, రెండర్) వెళ్లి పేరెంట్ చేసిన అదే దశలను అనుసరిస్తుంది.
- తిరిగి కాల్చేయబడింది (): భాగం యొక్క రెండరింగ్ పూర్తయినప్పుడు మరియు మీరు దీని తర్వాత ఏదైనా ఆపరేషన్ చేయాలనుకున్నప్పుడు, ఈ పద్ధతిని పిలుస్తారు.
- డిస్‌కనెక్ట్ కాల్ బ్యాక్ (): ఈ దశలో, మూలకం DOM నుండి తీసివేయబడుతుంది (కనెక్ట్ చేయబడిన కాల్బ్యాక్()కి ఎదురుగా).
- లైఫ్‌సైకిల్‌లో లోపం సంభవించినప్పుడు ఎర్రర్‌కాల్‌బ్యాక్() అంటారు.
కనెక్ట్ చేయబడిన కాల్బ్యాక్() నిర్మాణం
కనెక్ట్ చేయబడిన కాల్బ్యాక్ ():
- వేరియబుల్‌ను నిర్వచించండి మరియు ఆస్తి విలువను సెట్ చేయండి.
- దానిలోని అపెక్స్‌ని పిలవండి.
- ఈవెంట్‌లను సృష్టించండి మరియు పంపండి.
- UI APIని కాల్ చేయవచ్చు.
- దాని లోపల నావిగేషన్ సర్వీస్.
ఇది క్రింది విధంగా జావాస్క్రిప్ట్ ఫైల్‌లో పేర్కొనబడాలి:
తిరిగి కనెక్ట్ చేయబడింది ( ) {
//చేయండి...
}
అన్ని ఉదాహరణలు ఈ 'meta.xml' ఫైల్‌ను ఉపయోగించుకుంటాయి. మేము ప్రతి ఉదాహరణలో దీనిని పేర్కొనము. LWC భాగాలు మీ రికార్డ్ పేజీ, యాప్ పేజీ మరియు హోమ్ పేజీకి జోడించబడతాయి.
సంస్కరణ: Telugu = '1.0' ?>
<బహిర్గతం> నిజం < / బహిర్గతమైంది>
<లక్ష్యాలు>
<లక్ష్యం> మెరుపు__రికార్డ్‌పేజీ < / లక్ష్యం>
<లక్ష్యం> మెరుపు__AppPage < / లక్ష్యం>
<లక్ష్యం> మెరుపు__హోమ్‌పేజీ < / లక్ష్యం>
< / లక్ష్యాలు>
< / LightningComponentBundle>
ఉదాహరణ 1:
UIలో కాంపోనెంట్ లోడ్ అయినప్పుడు మేము కన్స్ట్రక్టర్() మరియు కనెక్ట్ చేయబడిన కాల్ బ్యాక్() దశను ప్రదర్శిస్తాము.
కనెక్ట్ CallBack.html
<టెంప్లేట్><మెరుపు కార్డు శీర్షిక = 'కనెక్ట్ కాల్ బ్యాక్' >
< / lightning-card>
< / టెంప్లేట్>
కనెక్ట్ CallBack.js
// మౌంటు ఫేజ్ - కన్స్ట్రక్టర్()నిర్మాణకర్త ( ) {
సూపర్ ( )
కన్సోల్. లాగ్ ( 'కన్స్ట్రక్టర్ అంటారు' )
}
// మౌంటు ఫేజ్ - కనెక్ట్ కాల్బ్యాక్()
తిరిగి కనెక్ట్ చేయబడింది ( ) {
కన్సోల్. లాగ్ ( 'connectedCallback అని పిలుస్తారు' )
}
ఇది క్రింది విధంగా కనిపిస్తుంది:
అవుట్‌పుట్:
ఏదైనా వస్తువు యొక్క 'రికార్డ్' పేజీకి ఈ భాగాన్ని జోడించండి.
పేజీని తనిఖీ చేయండి (ఎడమపై క్లిక్ చేసి, 'పరిశీలించు' ఎంచుకోండి). అప్పుడు, 'కన్సోల్' ట్యాబ్‌కు వెళ్లండి.
ఉదాహరణ 2:
ఈ ఉదాహరణలో, మేము ట్రాక్ డెకరేటర్‌తో పండును సృష్టిస్తాము మరియు కనెక్ట్ చేయబడిన కాల్బ్యాక్() పద్ధతిలో ఆస్తి విలువను 'మామిడి'గా సెట్ చేస్తాము. ఇది UIలో ప్రదర్శించబడుతుంది.
firstExample.html
<టెంప్లేట్><మెరుపు కార్డు శీర్షిక = 'గుణాలను సెట్ చేయడం' >
< div తరగతి = 'slds-var-m-around_medium' >
< బి > పండు పేరు: < / బి > {పండు}
< / div >
< / lightning-card>
< / టెంప్లేట్>
firstExample.js
దిగుమతి { మెరుపు మూలకం , ట్రాక్ } నుండి 'అదృష్టం' ;ఎగుమతి డిఫాల్ట్ తరగతి మొదటి ఉదాహరణ విస్తరించింది మెరుపు మూలకం {
@ ట్రాక్ పండు ;
తిరిగి కనెక్ట్ చేయబడింది ( ) {
// ఆస్తి విలువను మామిడికి అమర్చడం
ఇది . పండు = 'మామిడి' ;
}
}
అవుట్‌పుట్:
ఏదైనా వస్తువు యొక్క 'రికార్డ్' పేజీకి ఈ భాగాన్ని జోడించండి. ఇక్కడ మేము దానిని 'ఖాతా రికార్డ్' పేజీకి జోడిస్తాము. ఆ పండు 'మామిడి' అని మీరు చూస్తారు.
ఉదాహరణ 3:
మునుపటి కోడ్‌ని ఉపయోగించుకోండి మరియు “js” మరియు “html” ఫైల్‌లో కొన్ని స్టేట్‌మెంట్‌లను సవరించండి.
“js” ఫైల్‌లో 500తో “సంఖ్య” అనే కొత్త వేరియబుల్‌ని సృష్టించండి. సంఖ్య 500 కంటే ఎక్కువ ఉంటే పండును '500 కంటే ఎక్కువ'గా సెట్ చేయండి. లేదంటే, పండును '500కి సమానం'గా సెట్ చేయండి.
firstExample.html
<టెంప్లేట్><మెరుపు కార్డు శీర్షిక = 'గుణాలను సెట్ చేయడం' >
< div తరగతి = 'slds-var-m-around_medium' >
< బి > ఖరీదు: < / బి > {పండు}
< / div >
< / lightning-card>
< / టెంప్లేట్>
firstExample.js
@ ట్రాక్ పండు ;తిరిగి కనెక్ట్ చేయబడింది ( ) {
సంఖ్యను తెలియజేయండి = 500 ;
ఉంటే ( సంఖ్య > 500 ) {
ఇది . పండు = '500 కంటే ఎక్కువ' ;
}
లేకపోతే {
ఇది . పండు = '500కి సమానం' ;
}
}
అవుట్‌పుట్:
సంఖ్య 500. కాబట్టి, పండు ఫలితాన్ని '500కి సమానం'గా కలిగి ఉంటుంది.
ఉదాహరణ 4:
ఈ దృష్టాంతంలో, కనెక్ట్ చేయబడిన కాల్బ్యాక్() పద్ధతిని ఉపయోగించి మేము ఖాతా రికార్డులను (ఖాతా వస్తువు) తిరిగి ఇస్తాము.
- ముందుగా, మేము Id, పేరు, పరిశ్రమ మరియు రేటింగ్ ఫీల్డ్‌లతో మొదటి 10 ఖాతాల జాబితాను అందించే Apex తరగతిని వ్రాస్తాము.
- తరువాత, మేము ఖాతాలను ట్రాక్ చేస్తాము మరియు అపెక్స్ క్లాస్ నుండి పద్ధతికి కాల్ చేయడం ద్వారా కనెక్ట్ చేయబడిన కాల్బ్యాక్() పద్ధతిలో వాటిని తిరిగి ఇస్తాము.
- HTML ఫైల్‌లో, ఖాతాలను పునరావృతం చేసే మరియు పేరు మరియు పరిశ్రమను తిరిగి ఇచ్చే ప్రతి ఆదేశం కోసం మేము దీన్ని ఉపయోగిస్తాము.
AccountData.apxc
షేరింగ్ క్లాస్ ఖాతా డేటాతో పబ్లిక్@AuraEnabled(cacheable=true)
పబ్లిక్ స్టాటిక్ లిస్ట్
జాబితా
తిరిగి ఖాతా జాబితా;
}
}
secondExample.html
<టెంప్లేట్><మెరుపు కార్డు శీర్షిక = 'ఖాతాల జాబితాను ప్రదర్శించు' >
< div తరగతి = 'slds-var-m-around_medium' >
<టెంప్లేట్ if:true = { ఖాతాలు } >
<టెంప్లేట్ కోసం : ప్రతి = { ఖాతాలు } కోసం : అంశం = 'account_rec' >
< p కీ = { account_rec. Id } >< బి > ఖాతా: < / బి > {account_rec.Name} < బి > పరిశ్రమ: < / బి > {account_rec.Industry} < / p >
< / టెంప్లేట్>
< / టెంప్లేట్>
< / div >
< / lightning-card>
< / టెంప్లేట్>
secondExample.js
Apex నుండి returnAccని దిగుమతి చేయండి తరగతి :దిగుమతి నుండి returnAcc '@salesforce/apex/AccountData.returnAcc' ;
వ్రాయడానికి ఇది 'js' లోపల కోడ్ తరగతి :
@ ఖాతాలను ట్రాక్ చేయండి ;
@ ట్రాక్ లోపం ;
తిరిగి కనెక్ట్ చేయబడింది ( ) {
రిటర్న్అక్ ( )
// ఖాతాలను తిరిగి ఇవ్వండి
. అప్పుడు ( ఫలితం => {
ఇది . ఖాతాలు = ఫలితం ;
ఇది . లోపం = నిర్వచించబడలేదు ;
} )
. క్యాచ్ ( లోపం => {
ఇది . లోపం = లోపం ;
ఇది . ఖాతాలు = నిర్వచించబడలేదు ;
} ) ;
}
అవుట్‌పుట్:
మొదటి 10 ఖాతా రికార్డులు ఖాతా పేరు మరియు పరిశ్రమతో అందించబడతాయి.
ముగింపు
ఇప్పుడు, మీరు LWCలో అపెక్స్ డేటాతో పని చేస్తున్నప్పుడు చాలా సందర్భాలలో కనెక్ట్ చేయబడిన కాల్బ్యాక్() పద్ధతిని ఉపయోగించవచ్చు. ఈ గైడ్‌లో, కనెక్ట్ చేయబడిన కాల్బ్యాక్()ని ఉపయోగించి ఆస్తి విలువను ఎలా సెట్ చేయాలో మేము చర్చించాము మరియు దానిలో అపెక్స్‌ని చేర్చాము. మెరుగైన అవగాహన కోసం, మేము మొదట కన్స్ట్రక్టర్() మరియు కనెక్ట్ చేయబడిన కాల్బ్యాక్() పద్ధతులను చూపించే ఉదాహరణను అందించాము. మీరు మీ వెబ్‌పేజీని తనిఖీ చేసి కన్సోల్‌లో చూడాలి.