Renderização condicional

No Inter para renderizar condicionalmente elementos HTML, nós usamos os seguintes atributos nativos do Inter:

Atributo _if

O valor desse atributo deve ser o nome de uma propriedade do objecto data(da função renderIf()), e se o valor da referida propriedade for true, o elemento será renderizado, caso o contrário(se for false), o elemento não será renderizado.

<div id="alvo1"> <div> <h5 _if="viveNamesmaCidade">Essa pessoa vive na mesma cidade que você </h5> <img {...imagem}> <button onclick="anterior()" _if="temAnterior">Anterior</button> <button onclick="proximo()" _if="temProximo">Próximo</button> </div> </div> <script> const imagens = [ { urlDaImagem: "/images/Anny.jpg", condicional: { viveNamesmaCidade: true, temAnterior: false, temProximo: true } },...]; let pos = 0; const { imagem } = toAttrs({ in: "alvo1", data: { imagem: { src: imagens[0].urlDaImagem, alt: "Essa é uma pessoa" } } }) const _if = renderIf({ in: "alvo1", data: imagens[0].condicional }) function trocarImagem(){ imagem.src = imagens[pos].urlDaImagem; _if.setConds = imagens[pos].condicional; } function anterior(){ pos--; trocarImagem(); } function proximo(){ pos++; trocarImagem(); } </script>

Nós usamos a função renderIf para analisar o template em busca dos elementos que serão renderizados condicionalmente, e a referida função aceita apenas um objecto como o seu argumento. O valor da propriedade in, indica o valor do atributo id do elemento pai onde os elementos com os atributos condicionais se encontram, e o valor da propriedade data, deve ser um objecto, em que as suas propriedades vão indicar as propriedades condicionais e os valores dessas propriedades devem ser valores booleano(true/false). A propriedade setConds será explicada ao longo dessa matéria.

A função renderIf retorna um objecto reativo, que vai nos permitir alterar os valores das propriedades condicionais, e esse tipo de objecto no Inter chamamos de reator.

Atributo _elseIf

O elemento com esse atributo condicional deve aparecer inicialmente depois de um elemento com o atributo condicional _if. O atributo _elseIf aceita um valor, e o referido valor deve indicar o nome de uma propriedade condicional, e se o valor da referida propriedade for true o elemento será renderizado, e o elemento com o atributo _if não será renderizado, assim como os outros elementos com o atributo _elseIf.

<div id="else-if"> <h4>Você já pode trabalhar?</h4> <input type="number" value={idade} oninput="ref.idade = this.value"> <p>Valor no input é { idade }</p> <div> <p _if="inputEstaVazio"> Digite a tua idade no campo. </p> <p _elseIf="temEntre0A15"> { idade } anos ainda é muito pouco! </p> <p _elseIf="temEntre16A18"> { idade } anos é aceitável. </p> <p _elseIf="temEntre19A54"> { idade } anos é uma idade para trabalhar mesmo! </p> <p _elseIf="idadeMaiorQue54"> Hmmm, com { idade } anos você já tinha que estar a curtir a aposentadoria!!! </p> </div> </div> <script> const ref = Ref({ in: "else-if", data: { idade: "" } }) const reator = renderIf({ in: "else-if", data: { inputEstaVazio: true, temEntre0A15: false, temEntre16A18: false, temEntre19A54: false, idadeMaiorQue54: false } }) ref.observe((nome, valor) => { if(nome == "idade"){ reator.setConds = { inputEstaVazio: valor.trim().length == 0, temEntre0A15: valor >= 0 && valor < 16, temEntre16A18: valor > 15 && valor < 19, temEntre19A54: valor > 18 && valor < 55, idadeMaiorQue54: valor > 54 } } }) </script>

Se o valor da propriedade condicional, inputEstaVazio for true, o elemento com o atributo _if será renderizado, e os outros elementos não serão renderizados, e quando por exemplo o valor da propriedade temEntre16A18 for true, o elemento com o atributo _elseIf em que o seu valor for o nome da referida propriedade, será renderizado, o elemento com o atributo condicional _if não será renderizado, assim como os outros elementos com o atributo _elseIf.

Você vê o agrupamento dos elementos com os atributos condicional _if e _elseIf ? No Inter, esse agrupamento é chamado de agrupamento condicional. No agrupamento condicional quando uma propriedade condicional tiver o valor true, automaticamente as outras propriedades que estiverem a ser usadas no agrupamento terão o valor false resultando na remoção dos elementos que usam as referidas propriedades.

Não é recomendado fazer o seguinte:

<div id="exemplo"> <h3 _if="casado">Nelson casou!</h3> <div> <p _if="casado"> Ele é casado </p> <p _elseIf="solteiro"> Ele está solteiro </p> </div> </div>

Porque quando o valor da propriedade solteiro for true, automaticamente o Inter vai definir o valor da propriedade casado para false, porque a propriedade casado está a ser usada em um agrupamento condicional, sendo assim, o primeiro elemento com o atributo _if no exemplo será removido "prematuramente". A lição é que, não use as propriedades condicionais usadas no agrupamento condicional mais de uma vez.

Atributo _else

O elemento com o atributo _else deve aparecer depois de um elemento com o atributo _if ou depois de um elemento com atributo elseIf.

Se o elemento com o atributo _else for usado depois de um elemento com o atributo _if, se o elemento com o atributo _if não for renderizado, o elemento com o atributo _else será renderizado.

Se o elemento com o atributo _else for usado no final de um agrupamento condicional(depois de um elemento com o atributo _elseIf), ele(o elemento) será renderizado se o valor de todas as propriedades usadas no agrupamento condicional forem false.

<div id="alvo2"> <div> <h4 _if="pessoa" style="color: green;">É uma pessoa</h4> <h4 _else style="color: red;">Não é uma pessoa</h4> <div> <img src="/images/Inter.png" alt="Logo do Inter"> <button onclick="_if2.pessoa = false">Verificar essa imagem</button> <img src="/images/Ramon.jpg" alt="Uma pessoa"> <button onclick="_if2.pessoa = true">Verificar essa imagem</button> </div> </div> </div> <script> const _if2 = renderIf({ in: "alvo2", data: { pessoa: false } }) </script>

Atributo _ifNot

Esse atributo é o inverso do atributo _if. O elemento com o referido atributo só será renderizado caso o valor da propriedade condicional desse atributo for igual a false. Seria o mesmo que dizer : Renderiza se não for igual a true.

<div id="alvo3"> <p _ifNot="amigo"> Você é mesmo amigo do Interjs? </p> </div> <script> const _if3 = renderIf({ in: "alvo3", data: { amigo: false } }) </script>

Método observe

Esse método é bem similar ao da referência. Ele será um método do objecto reator da renderização condicional, ele recebe apenas uma função como o seu argumento, e a referida função será invocada toda vez que o valor de uma propriedade condicional for alterado. E a função será invocada com dois argumentos:

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

<div id="alvo4"> <p>Jeremias está: <span _if="casado">casado.</span> <span _else>solteirão!</span> </p> <button onclick="_if4.casado = !_if4.casado">Clica para { estado } </button> </div> <script> const _if4 = renderIf({ in: "alvo4", data: { casado: true } }) const ref2 = Ref({ in: "alvo4", data: { estado: "ficar solteiro" } }) _if4.observe((prop, estaCasado) => { if(prop == "casado"){ ref2.estado = estaCasado ? "ficar solteiro" : "casar" } }) </script>

Propriedade setConds

Nós usamos essa propriedade quando pretendermos definir o valor de múltiplas propriedades condicionais. Essa propriedade recebe apenas um objecto como o seu valor, e as propriedades do referido objecto devem ser as propriedades condicionais cujo os seus valores serão alterados, e os valores serão os novos valores para as respectivas propriedades.

Essa matéria te explicou tudo sobre a renderização condicional no Inter.