Vamos discutir aqui como usar as diretivas de modelo HTML do componente da web do Lightning. O poder do Lightning Web Components é o sistema de modelos, que usa o DOM virtual para renderizar componentes de maneira inteligente e eficiente. Como o nome sugere, as diretivas de atributo estão alterando as propriedades de um elemento ao qual estão anexadas e as estruturais estão mudando. As diretivas de modelo HTML são propriedades especiais associadas a uma tag de modelo.
Um modelo é um HTML válido com uma tag raiz. Quando um componente é renderizado, a tag é substituída pelo nome do componente, <namespace-component-name>. Por exemplo, no console do navegador, um componente com o modelo myComponent.html é renderizado como <c-my-component>, onde c é o </ c-my-namespace padrão.
Escreva modelos usando HTML padrão e algumas diretivas exclusivas do Lightning Web Components.
As diretivas são atributos HTML especiais, como if: true e for: each, que lhe dá mais poder para manipular o DOM na marcação. Os modelos de HTML também renderizam dados para o DOM. Use uma sintaxe simples para vincular decorativamente o modelo de um componente aos dados na classe JavaScript do componente. Aqui estão as diretivas do modelo HTML
- if: true | false
- para cada
- iterator: iterator
- chave = { uniqueId }
- lwc: dom = ”manual”
Usando a diretiva If
Use a diretiva if: true | false para renderizar condicionalmente os elementos DOM em um template. se a expressão da condição retornar verdadeiro, poderemos renderizar o DOM condicionalmente. por exemplo, o código a seguir mostra como usar a diretiva if para renderizar o DOM do modelo.
Suponhamos que se você deseja exibir os valores com base em algum texto, você pode fazê-lo conforme mostrado abaixo.
|
1
2
3
4
5
6
|
<template if:true={isSelectHot}>
Account Rating is Hot ...
</template>
<template if:false={isSelectHot}>
Account Rating is Not Hot ...
</template>
|
Usando diretiva de iterador
Use esta diretiva para iterar sobre um array e renderizar uma lista. Use esta diretiva para acessar o item atual. O placeholder é um identificador que o modelo injeta no escopo atual. Use esta diretiva para acessar o índice baseado em zero do item atual. O placeholder é um novo identificador que o modelo injeta no escopo atual. Por exemplo, o código a seguir itera a coleção de contasfor:item="currentItem"currentItemfor:index="index"index
|
1
2
3
4
5
|
<template if:true={accounts.data}>
<template for:each={accounts.data} for:item=“acc”>
<p key={acc.Id}>{acc.Name}</p>
</template>
</template>
|
O exemplo a seguir, o código a seguir irá iterar a coleta de dados aninhados que contém contas e seus contatos
|
1
2
3
4
5
6
7
8
9
|
<template for:each={accountsInner.data} for:item=“acc”>
<li key={acc.Id}>{acc.Name}
<ul key={acc.Id}>
<template for:each={acc.Contacts} for:item=“con”>
<li key={con.Id}>{con.Name}</li>
</template>
</ul>
</li>
</template>
|
Usando diretiva de iterador
Use esta diretiva para aplicar um comportamento especial ao primeiro ou último item em um array e renderizar uma lista. Acesse essas propriedades no iteratorName:
value—O valor do item na lista. Use esta propriedade para acessar as propriedades da matriz. Por exemplo ,.iteratorName.value.propertyNameindex—O índice do item na lista.first—Um valor booleano que indica se este item é o primeiro item da lista.last—Um valor booleano que indica se este item é o último item da lista.
O exemplo a seguir irá iterar a coleta de dados da conta.
|
1
2
3
4
5
6
7
8
9
|
<ul class=“slds-m-around_medium”>
<template if:true={accounts.data}>
<template iterator:it={accounts.data}>
<li key={it.value.Id}>
{it.value.Name}
</li>
</template>
</template>
</ul>
|
O exemplo a seguir itera a coleção de dados aninhados.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<template if:true={accountsInner.data}>
<ul>
<template iterator:it={accountsInner.data}>
<li key={it.value.Id}>{it.value.Name}
<ul key={it.value.Id}>
<template iterator:it={it.value.Contacts}>
<li key={it.value.Id}>{it.value.Name}</li>
</template>
</ul>
</li>
</template>
</ul>
</template>
|
chave = {uniqueId}
Use esta diretiva para melhorar o desempenho de renderização, atribuindo um identificador exclusivo a cada item em uma lista. A keydeve ser uma string ou um número, não pode ser um objeto. O mecanismo usa as chaves para determinar quais itens foram alterados.
O exemplo a seguir mostra como definir a diretiva key usando key = {acc.Id} on for: each iterator.
|
1
2
3
|
<template for:each={accounts.data} for:item=“acc”>
<p key={acc.Id}>{acc.Name}</p>
</template>
|
O exemplo a seguir mostra como definir a diretiva key usando key = {it.value.Id} no iterator.
|
1
2
3
4
5
|
<template iterator:it={accounts.data}>
<li key={it.value.Id}>
{it.value.Name}
</li>
</template>
|
Usando a diretiva lwc: dom = ”manual”
Usar JavaScript para manipular o DOM não é recomendado porque o mecanismo do Lightning Web Components o faz com mais eficiência. No entanto, existem algumas bibliotecas JavaScript de terceiros que assumem o DOM. Como os componentes da web do Lightning usam o DOM shadow, se uma chamada para appendChild() manipular o DOM, o estilo não é aplicado ao elemento anexado. Ao usar essas bibliotecas em uma web do Lightning componente, adicione lwc:dom="manual" a qualquer elemento HTML que deseja manipular com JavaScript. Quando o mecanismo vê a diretiva, ele preserva o encapsulamento DOM da sombra. Adicione a lwc:dom="manual" diretiva a um elemento HTML nativo vazio. O proprietário do componente chama appendChild() esse elemento para inserir manualmente o DOM.
|
1
2
3
|
<template>
<div lwc:dom=“manual”></div>
</template>
|
fonte: rajvakati.com
