Gerenciador de atributos

O gerenciador de atributos nos permite fazer as seguintes operações de uma maneira reativa e elegante:

• Criar um ou vários atributos.
• Atualizar o valor de um ou vários atributos.
• Deletar um ou vários atributos.

Para definir o gerenciador de atributos em um elemento, nós usamos a seguinte sintaxe: {...nomedogerenciador}

A sintaxe acima mencionada deve ser o único atributo do elemento alvo, e para analisar o template em busca de gerenciadores, nós usamos a função toAttrs, e a referida função aceita apenas um objecto como o seu argumento, e o objecto deve ter a propriedade in, que vai indicar o valor do atributo id do elemento pai onde os elementos com os gerenciadores se encontram, e a propriedade data, que deve ser um objecto, em que as suas propriedades vão indicar os nomes dos gerenciadores, e os valores dessas propriedades devem ser um objecto em que as suas propriedades vão indicar os nomes dos atributos/eventos que serão definidos no elemento onde o gerenciador for encontrado, e os valores, serão os valores dos respectivos atributos/eventos.

<div id="alvo1"> <img {...imagem}> </div> <script> const { imagem } = toAttrs({ in: "alvo1", data: { imagem: { src: "/images/orlando.jpg", alt: "Foto de Orlando", title: "Foto de Orlando" } } }) </script>

Objecto gerenciador

A função toAttrs retorna um objecto com as mesmas propriedades que o objecto data. No exemplo anterior, nós desestruturamos o referido objecto para extrair o objecto gerenciador imagem. Se você abrir agora nessa página o console do navegador e modificar o valor de uma das propriedades do objecto imagem, vais notar que a interface será atualizada para refletir o novo valor. E quando a propriedade for o nome de um evento do DOM, por exemplo o onclick, a palavra-chave this dentro da função que será invocada quando o referido evento ocorrer, vai indicar o objecto gerenciador.

Para deletar um atributo com o gerenciador, basta definirmos null como o valor da propriedade que representa o atributo que pretendermos deletar.

<style> .corAzul { color: rgb(101, 163, 214); } </style> <div id="alvo2"> <button {...cor}>Alternar cor</button> </div> <script> toAttrs({ in: "alvo2", data: { cor: { class: "corAzul", onclick(){ if(this.class){ // Deleta o atributo class. this.class = null } else { this.class = "corAzul" } } } } }) </script>

O nome do gerenciador deve estar sempre em letras minúsculas, e um gerenciador apenas controla um elemento, se tentares definir um gerenciador para mais de um elemento, o primeiro elemento é o que será controlado. E se você não quiser ainda usar um atributo, basta definir null como o valor da propriedade que representa o referido atributo, e ele não será criado.

<script> toAttrs({ in: "id", data: { gerenciador: { title: null, // O atributo title não será criado. class: "class" } } }) </script>

Método observe

Ele será um método do objecto gerenciador, ele aceita apenas uma função como o seu argumento, e a referida função será invocada toda vez que o valor de uma propriedade do gerenciador for alterado. A função será invocada com dois argumentos:

• O primeiro argumento vai indicar o nome da propriedade que o seu valor foi alterado.
• O segundo argumento vai indicar o novo valor da propriedade.

Propriedade setAttrs

Ela será uma propriedade do objecto gerenciador, ela é usada para atualizar os valores de múltiplos atributos. Ela recebe apenas um objecto como o seu valor, e as propriedades do referido objecto devem indicar os nomes dos atributos cujo os seus valores serão atualizados, e os valores, serão os novos valores para os respectivos atributos.

<div id="alvo3"> <img {...slide}> </div> <script> const slides = [ { src: "/images/luna.jpg", alt: "Foto de Luna", title: "Slide 1" }, { src: "/images/Inter.png", alt: "Foto de Inter", title: "Slide 2" }, { src: "/images/Ramon.jpg", alt: "Foto de Ramon", title: "Slide 3" } ] let index = 0; const { slide } = toAttrs({ in: "alvo3", data: { slide: { ...slides[0], onclick(){ if(index < 2){ index++; this.setAttrs = slides[index]; } else { index = 0; this.setAttrs = slides[index]; } } } } }) </script>

Tenta clicar na imagem e vê o que acontece. Essa matéria te explicou tudo sobre o gerenciador de atributos.