Усім привіт!
Це друга стаття з нашої серії, де ми розбираємося у базових принципах LWC. Минулого разу ми розбирали базові принципи та структуру LWC компонентів. Сьогодні ж ми поговоримо про основи розмітки LWC.
Перш за все, що таке розмітка LWC? LWC - це компонентна модель розробки, де кожен компонент складається з двох основних частин: розмітки (HTML) та контролера (JavaScript). Розмітка визначає, як компонент відображається на сторінці, тоді як JavaScript визначає поведінку компонента. У цій статті ми не будемо занурюватись у базові принципи побудови FrontEnd, а лише розберемо декілька цікавих та базових моментів у розмітці LWC.
Отже, як здійснюється взаємодія між розміткою та JavaScript в LWC? Є декілька способів, які ми можемо використовувати.
Для початку розберемо використання директив. Директиви - це спеціальні атрибути HTML, які вказують LWC, що робити з елементом. Директиви використовуються в розмітці, щоб передавати інформацію до JavaScript. Наприклад, директива onchange вказує LWC, яка функція JavaScript має викликатися, коли змінюється значення поля введення. Концепція директив у LWC полягає в тому, що ми можемо використовувати HTML-атрибути зі спеціальними іменами, які підказують компоненту, що він має зробити з певним елементом. Це дозволяє нам змінювати поведінку і відображення компонента, залежно від значень, переданих через ці атрибути.
Директиви умовного рендерингу елементів
lwc:if, lwc:elseIf та lwc:else - ці директиви використовується для умовного рендерингу елементів. Наприклад, ми можемо використовувати lwc:if для того, щоб відображати елементи на сторінці, тільки якщо певна умова виконується. Наприклад:
<template>
<template lwc:if={showGreeting}>
<p>Hello, World!</p>
</template>
</template>
У цьому прикладі, якщо змінна showGreeting має значення true, то елемент <p> буде відображатись на сторінці.
Також важливо: якщо ви використовуєте lwc:if в template тегу, це означає, що весь контент, який міститься в цьому тегу, буде додаватись до DOM, коли вказана умова виконується, і буде видалятись з DOM, коли умова не виконується. Наприклад:
<template lwc:if={shouldRender}>
<p>This text will be added to the DOM only if shouldRender is true.</p>
</template>
У цьому прикладі, якщо змінна shouldRender має значення true, то елемент <p> буде доданий до DOM, і він буде відображений на сторінці. Якщо значення shouldRender буде false, то елемент <p> буде видалений з DOM, і він не буде відображатись на сторінці.
З іншого боку, ви можете також використовувати css атрибут hidden як, наприклад, стандартний slds-hidden. Це означає, що елемент залишається в DOM, але він стає невидимим для користувача. Наприклад:
<div class=”slds-hidden”>
<p>This text will be hidden if shouldRender is false.</p>
</div>
У цьому прикладі елемент <div> та елемент <p> будуть додані до DOM та залишатимуться там навіть якщо ми не бачимо цього елементу. Він буде лише прихований від користувача.
Отже, коли ви використовуєте lwc:if, елементи додаються та видаляються з DOM відповідно до поточного стану змінної, а коли ви використовуєте css, елемент залишається в DOM, але може бути схований за допомогою атрибуту hidden. Враховуйте ці особливості під час розробки своїх компонентів. Для прикладу ви можете віддавати перевагу lwc:if у випадках, коли на своїй розмітці хочете відображати дані з об’єкта, який буде сформований у js після певних операцій користувача. При використанні css, цей елемент потрапить у DOM та спробує отримати дані з об’єкта, який в цей момент ще undefined, – відповідно ви отримаєте помилку.
Отже, використання lwc:if та css для приховування елементів від користувача може бути корисним в різних випадках, та залежить від потреб компонента. Обидва підходи можуть бути використані для умовного рендерингу елементів на сторінці; проте вони мають різні підходи до маніпуляції DOM, що може вплинути на ефективність та продуктивність компонента.
Також варто знати, що існує директива if:true, однак Salesforce не рекомендує їх використовувати, оскільки планує припинити їхню підтримку та взагалі видалити їх у майбутньому.
Директиви ітерації у розмітці for:each
Далі розглянемо for:each - це директива у LWC, яка дозволяє повторювати один або декілька HTML елементів для кожного елементу масиву або об’єкту у списку. Використання цієї директиви дуже корисне для відображення списків даних на сторінці та інших потреб, наприклад коли одна і та ж частина сторінки може повторюватись декілька разів – ми можемо побудувати базовий маленький компонент та динамічно викликати його потрібну кількість разів з батьківського.
Використання директиви for:each складається з двох кроків:
- Призначення змінної у шаблоні, яка буде представляти кожен елемент масиву або об’єкту.
- Вказати, який елемент шаблону потрібно повторювати для кожного елементу масиву або об’єкту.
Ось приклад використання директиви for:each для відображення списку елементів:
JS
@track listItems= [
{Id: 1, Name: 'John Doe'},
{Id: 2, Name: 'Jane Smith'},
{Id: 3, Name: 'Bob Johnson'}
];
HTML
<template>
<ul>
<template for:each={listItems} for:item="item">
<li key={item.id}>{item.name}</li>
</template>
</ul>
</template>
У цьому прикладі ми використовуємо директиву for:each для повторення HTML елементу <li> для кожного елементу масиву listItems. Змінна for:item вказує, яка змінна шаблону буде представляти кожен елемент масиву.
Крім того, ми використовуємо атрибут key для вказівки унікального ідентифікатора для кожного елементу. Це допомагає зберегти стан елементів, коли список даних змінюється.
Також можна використовувати директиву for:each з об’єктами. У цьому випадку використовується директива for:key замість атрибута key для вказівки поля, яке містить унікальний ідентифікатор для кожного об’єкту.
<template>
<ul>
<template for:each={objectList} for:item="key">
<li for:key={key}>{objectList[key]}</li>
</template>
</ul>
</template>
У цьому прикладі ми використовуємо директиву for:each для повторення HTML елементу <li> для кожного ключа в об’єкті objectList.
Також можна використовувати директиву for:each з вкладеними списками, коли масив містить об’єкти, що також містять масиви.
<template>
<ul>
<template for:each={listItems} for:item="item">
<li key={item.id}>
{item.name}
<ul>
<template for:each={item.subitems} for:item="subitem">
<li key={subitem.id}>{subitem.name}</li>
</template>
</ul>
</li>
</template>
</ul>
</template>
У цьому прикладі ми використовуємо директиву for:each двічі - для повторення списку головних елементів та списку вкладених елементів для кожного головного елемента. Крім того, ми використовуємо атрибут key для кожного елементу, що допомагає зберегти стан елементів при зміні списку даних.
Директива for:each дозволяє використовувати умови для відображення елементів в списку. Наприклад, у наступному прикладі ми відображаємо тільки ті елементи списку, які мають значення isSelected дорівнює true:
<template>
<ul>
<template for:each={listItems} for:item="item">
<template lwc:if={item.isSelected}>
<li key={item.id}>{item.name}</li>
</template>
</template>
</ul>
</template>
У цьому прикладі ми використовуємо директиву lwc:if в шаблоні, що використовується з директивою for:each. Це дозволяє відображати тільки ті елементи списку, які мають значення isSelected дорівнює true.
Отже, директива for:each - це потужний інструмент у LWC, який дозволяє легко відображати списки даних на сторінці, а також дозволяє використовувати умови для відображення тільки певних елементів списку.
Event директиви у LWC
Директиви івентів у LWC дозволяють додавати обробники подій до елементів у вашому компоненті. Коли відбувається певна подія (наприклад, натискання кнопки, введення тексту, втрата фокуса тощо), зареєстрований обробник буде викликаний, дозволяючи вам виконати певні дії або змінити стан компонента.
<template>
<lightning-button onclick={handleClick}>Click me!</lightning-button>
</template>
У цьому прикладі, ми додаємо обробника подій handleClick, який буде викликатись, коли користувач клікає на кнопку. Це одна з найрозповсюдженіших event директив, насправді кількість event директив є дуже великою та кожна має свої особливості. Також event директиви можуть залежати від тегу який ви використовуєте. Ми не будемо дeтально зупинятись на цьому та порекомендувати вам звернути увагу на цю документацію зі списком всіх доступних lightning тегів для lwc та їхнім детальним описом включно з деякими особливими event директивами.
Давайте розглянемо декілька порад для використання директив івентів
- Використовуйте зрозумілі та інформативні назви обробників: давайте обробником подій імена, які чітко вказують, що вони роблять. Наприклад, “handleInputChange” чи “handleButtonClick” замість просто “handleEvent” або “onEvent”.
- Розділяйте логіку: Створюйте окремі функції для обробки різних подій, щоб зберігати ваш компонент легким для розуміння та обслуговування.
- Враховуйте продуктивність: Якщо ви працюєте з великою кількістю елементів, на які додаються обробники, може з’явитися питання продуктивності. Спробуйте мінімізувати використання зайвих обробників або оптимізуйте їх роботу, якщо це можливо.
- Користуйтесь документацією: Перевіряйте документацію LWC, щоб дізнатися про доступні директиви івентів та їхні властивості. Ви можете знайти додаткові можливості та опції, які покращать ваші компоненти.
Тепер давайте поговоримо про зв’язування даних.
Зв’язування даних - це процес зв’язування властивостей об’єкта JavaScript з елементами в розмітці. Зміна значення властивості об’єкта JavaScript автоматично змінює значення в розмітці, і навпаки. Щоб посилатися на змінну з JS у розмітці, ми використовуємо назву змінної обгорнуту у фігурних дужках. Наприклад, скажімо, у нашому файлі JS є змінна під назвою “name”. Ми можемо посилатися на цю змінну в нашій розмітці так:
<template>
<div>Hello, {name}!</div>
</template>
У цьому прикладі значення змінної “name” буде відображено в розмітці, і якщо в процесі воно буде змінено – це відобразиться на нашій сторінці.
Тепер давайте поговоримо про стилі в LWC. LWC як і будь-який інший фронтенд фреймворк не може існувати без стилів, які ми можемо задавати, або за допомогою css класів, або прямих позначень style в тегах.
Крім того, LWC також надає набір класів стилю на основі системи Salesforce Lightning Design System (SLDS), які можна використовувати для стилізації ваших компонентів.
Одна з головних переваг використання класів стилю SLDS полягає в тому, що вони забезпечують узгоджений вигляд у всіх програмах Salesforce. Це може допомогти гарантувати, що компоненти LWC ідеально поєднуються з іншими елементами інтерфейсу Salesforce. Щоб використовувати класи SLDS, ви можете просто додати відповідні імена класів до ваших елементів HTML. Наприклад, щоб створити стиль кнопки як основної, ви можете використати клас slds-button slds-button_brand:
<lightning-button variant="brand" label="Click me!" class="slds-m-top_small"></lightning-button>
У цьому прикладі клас slds-m-top_small використовується для додавання маржину над верхньою частиною кнопки. Більш детально про SLDS стилі ви можете прочитати у цій статті.
Окрім класів стилів SLDS, LWC також надає різноманітні компоненти введення та кнопки Lightning, які можна використовувати для створення форм та інших елементів інтерфейсу. Ці компоненти включають <lightning-input>, <lightning-combobox>, <lightning-textarea>, <lightning-button> та багато інших. Ці компоненти забезпечують узгоджений зовнішній вигляд і розроблені для бездоганної роботи з іншими компонентами інтерфейсу Salesforce.
Одна важлива річ, яку слід зазначити щодо використання компонентів LWC і класів стилів SLDS, полягає в тому, що вони не є такими ж, як їхні нативні аналоги HTML і CSS. Хоча компоненти та класи можуть мати схожі назви та функціональність, вони розроблені спеціально для використання на платформі Salesforce. Це означає, що можуть бути деякі відмінності в поведінці та зовнішньому вигляді порівняно з рідним HTML і CSS. Крім того, деякі функції, доступні у нативному HTML і CSS, можуть бути недоступні у LWC.
Отже, ми розглянули основи розмітки LWC та комунікацію між розміткою та JavaScript. Ми показали, як використовувати ітерацію, умовні оператори та посилання на змінні з JavaScript у розмітці. Ці інструменти допоможуть вам створювати потужні та ефективні LWC-компоненти, які взаємодіють з даними на сторінці та забезпечують високу якість взаємодії з користувачем. У наступній статті ми розберемося у комунікації LWC компонентів між собою. Які існують способи та їхні переваги, недоліки та обмеження.