sábado, junho 22, 2024
HomeSalesforce DXLWCDiretivas de componentes da Web do Lightning

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

RELATED ARTICLES

Most Popular

Recent Comments