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