Diretivas de componentes da Web do Lightning

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

1. if: true | false
2. para cada
3. iterator: iterator
4. chave = { uniqueId }
5. 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.

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

O exemplo a seguir, o código a seguir irá iterar a coleta de dados aninhados que contém contas e seus contatos

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.propertyName
• index—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.

O exemplo a seguir itera a coleção de dados aninhados.

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.

O exemplo a seguir mostra como definir a diretiva key usando key = {it.value.Id} no iterator.

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.

fonte: rajvakati.com