Лигхтнинг веб компонента (ЛВЦ) има сопствени животни циклус за уметање компоненте/е у ДОМ, рендеровање и уклањање компоненти/е из ДОМ-а. ЦоннецтЦаллбацк() (у фази монтирања) је једна од метода животног циклуса која се покреће када се компонента убаци у ДОМ. У овом водичу ћемо разговарати о цоннецтионцаллбацк() и различитим сценаријима који укључују овај метод са примерима.
- Цонструцтор() је први метод у закачици животног циклуса који се позива када се креира инстанца „Компонента“. Својства компоненте у овој фази неће бити спремна. Ако желите да приступите елементу хоста, морамо да користимо „тхис.темплате“. Пошто подређене компоненте у овој фази неће постојати, не можемо да приступимо ни подређеним компонентама. Супер() се користи у овој методи.
- Цоннецтцаллбацк() је други метод (фаза 2) који се позива када се елемент убаци у ДОМ. У овом случају, кука тече од родитеља до детета. Својства компоненте у овој фази неће бити спремна. Ако желите да приступите елементу хоста, морамо да користимо „тхис.темплате“. Пошто подређене компоненте у овој фази неће постојати, не можемо да приступимо ни подређеним компонентама.
- дати, пружити (): Спољна фаза је рендеровање. Родитељска компонента се приказује, а потом ће се и подређена компонента приказати ако постоји. Након рендеровања надређеног, он иде на подређену компоненту (конструктор, повезани повратни позив, рендер) и прати исте кораке као и родитељ.
- рендередЦаллбацк (): Када је приказивање компоненте завршено и након тога желите да извршите било коју операцију, позива се овај метод.
- дисцоннецтедЦаллбацк (): У овој фази, елемент се уклања из ДОМ-а (супротно од цоннецтцаллбацк()).
- ЕррорЦаллбацк() се позива када дође до грешке у животном циклусу.
Цоннецтедцаллбацк() структура
Коришћење Цоннецтцаллбацк():
- Дефинишите променљиву и поставите вредност својства.
- Позовите Апек унутар њега.
- Креирајте и пошаљите догађаје.
- УИ АПИ се може позвати.
- Навигациони сервис унутар њега.
Мора бити наведен у ЈаваСцрипт датотеци на следећи начин:
повезанПовратни позив ( ) {
// урадите…
}
Сви примери користе ову „мета.кмл“ датотеку. Ово нећемо прецизирати у сваком примеру. ЛВЦ компоненте се могу додати на вашу страницу за снимање, страницу апликације и почетну страницу.
верзија = '1.0' ?>
<ЛигхтнингЦомпонентБундле кмлнс = '0Ц009191Д3334Ф5137Ц1ФЕ8294Б8ДДФ7Ц3ЕБ0ФЕ9' >
<апиВерсион> 57.0 < / апиВерсион>
<исЕкпосед> истина < / исЕкпосед>
<циљеви>
<таргет> лигхтнинг__РецордПаге < / циљ>
<таргет> лигхтнинг__АппПаге < / циљ>
<таргет> лигхтнинг__ХомеПаге < / циљ>
< / мете>
< / ЛигхтнингЦомпонентБундле>
Пример 1:
Ми ћемо демонстрирати фазу конструктора() и цоннецтцаллбацк() када се компонента учита на корисничко сучеље.
цоннецтедЦаллБацк.хтмл
<темплате><муња-карта наслов = „Повезани повратни позив“ >
< / муња-картица>
< / шаблон>
цоннецтедЦаллБацк.јс
// Фаза монтирања - конструктор()конструктор ( ) {
супер ( )
конзола. Пријава ( 'конструктор зове' )
}
// Фаза монтирања - цоннецтедЦаллбацк()
повезанПовратни позив ( ) {
конзола. Пријава ( 'цоннецтедЦаллбацк позван' )
}
изгледа овако:
Излаз:
Додајте ову компоненту на страницу „Снимање“ било ког објекта.
Прегледајте страницу (кликните лево и изаберите „Инспецт“). Затим идите на картицу „Конзола“.
Пример 2:
У овом примеру ћемо креирати воће са декоратером стазе и поставити вредност својства на „Манго“ унутар Цоннецтцаллбацк() методе. Ово се приказује на корисничком интерфејсу.
фирстЕкампле.хтмл
<темплате><муња-карта наслов = „Својства подешавања“ >
< див класа = 'слдс-вар-м-ароунд_медиум' >
< б > Име воћа: < / б > {воће}
< / див >
< / муња-картица>
< / шаблон>
фирстЕкампле.јс
увоз { ЛигхтнингЕлемент , трацк } из 'срећа' ;извоз Уобичајено класа ФирстЕкампле протеже ЛигхтнингЕлемент {
@ пратити воће ;
повезанПовратни позив ( ) {
// Постављање вредности својства на Манго
ово . воће = 'манго' ;
}
}
Излаз:
Додајте ову компоненту на страницу „Снимање“ било ког објекта. Овде га додајемо на страницу „Запис о налогу“. Видећете да је воће „Манго“.
Пример 3:
Искористите претходни код и измените неке изјаве у датотеци „јс“ и „хтмл“.
Креирајте нову променљиву која је „број“ са 500 у „јс“ датотеци. Подесите воће на „веће од 500“ ако је број већи од 500. У супротном, подесите воће на „једнако 500“.
фирстЕкампле.хтмл
<темплате><муња-карта наслов = „Својства подешавања“ >
< див класа = 'слдс-вар-м-ароунд_медиум' >
< б > Цена: < / б > {воће}
< / див >
< / муња-картица>
< / шаблон>
фирстЕкампле.јс
@ пратити воће ;повезанПовратни позив ( ) {
нека број = 500 ;
ако ( број > 500 ) {
ово . воће = 'више од 500' ;
}
друго {
ово . воће = 'једнако 500' ;
}
}
Излаз:
Број је 500. Дакле, плод држи резултат као „једнак 500“.
Пример 4:
У овом сценарију враћамо записе о налогу (објекат налога) помоћу методе цоннецтцаллбацк().
- Прво, пишемо Апек класу која враћа листу првих 10 налога са пољима Ид, Наме, Индустри и Ратинг
- Затим пратимо налоге и враћамо их у методу цоннецтедцаллбацк() позивањем методе из Апек класе.
- У ХТМЛ датотеци је користимо за сваку директиву која понавља налоге и враћа назив и делатност.
АццоунтДата.апкц
јавно са дељењем класе АццоунтДата {@АураЕнаблед(цацхеабле=труе)
јавна статичка листа<Аццоунт> ретурнАцц(){
Лист<Аццоунт> аццоунтЛист = [ИЗАБИР ИД, назив, индустрија, оцена ИЗ ограничења налога 10];
ретурн аццоунтЛист;
}
}
сецондЕкампле.хтмл
<темплате><муња-карта наслов = „Прикажи листу налога“ >
< див класа = 'слдс-вар-м-ароунд_медиум' >
<темплате иф:труе = { рачуни } >
<темплате за :сваки = { рачуни } за :итем = 'аццоунт_рец' >
< стр кључ = { аццоунт_рец. Ид } >< б > налог: < / б > {аццоунт_рец.Наме} &нбсп; &нбсп; < б > Индустрија: < / б > {аццоунт_рец.Индустри} < / стр >
< / шаблон>
< / шаблон>
< / див >
< / муња-картица>
< / шаблон>
сецондЕкампле.јс
Увезите ретурнАцц из Апек-а класа :увоз ретурнАцц фром '@салесфорце/апек/АццоунтДата.ретурнАцц' ;
Пишите ово код унутар „јс“ класа :
@ пратити рачуне ;
@ грешка у праћењу ;
повезанПовратни позив ( ) {
ретурнАцц ( )
// Врати рачуне
. онда ( резултат => {
ово . рачуни = резултат ;
ово . грешка = недефинисан ;
} )
. улов ( грешка => {
ово . грешка = грешка ;
ово . рачуни = недефинисан ;
} ) ;
}
Излаз:
Првих 10 записа налога се враћају са именом налога и индустријом.
Закључак
Сада, у већини случајева можете да користите метод цоннецтцаллбацк() док радите са Апек подацима у ЛВЦ-у. У овом водичу смо разговарали о томе како да подесимо вредност својства помоћу цоннецтцаллбацк() и укључили Апек у њега. Ради бољег разумевања, прво смо дали пример који је показао методе цонструцтор() и цоннецтедцаллбацк(). Морате да прегледате своју веб страницу и погледате је у конзоли.