🔃 Uma dica para quando você estiver fazendo um FOR

A minha dor

Numa listagem geralmente existe a necessidade de ter layouts diferentes para um item ou itens específicos, e lógico existe sempre a possibilidade de fazer isso via CSS, entretanto existem casos onde vai haver conteúdos diferentes, por exp. classes, textos, imagens, etc, em determinados itens. Para tanto eu fazia coisas como essa:

{% for post in posts %}
	<article class="{% if loop.first %}active{% endif %}">
		...
	</article>
{% endfor %}

O que isso faz? Coloca a classe active no primeiro post.

Isso funciona? Sim. Está errado? De forma alguma, se você também faz não está errado mais essa if "encaixado" no meio da class nunca agradou-me.

Uma inspiração

Foi isso:

{% for post in posts %}
	<article class="{{ ['active'][not loop.first] }}">
		...
	</article>
{% endfor %}

Só isso? Sim.

Eu sei que mais experientes vão dizer: isso é óbvio. Concordo, entretanto observe quantas camadas de conceito existem neste pedacinho de código.

• Criar e usar;
• Ordem de array;
• Inversão do primeiro;
• Suprimir sequência;

Criar e usar

Usando [][] cria e usa o array, cria nas primeiras [] (chaves), e usa nas segundas. Note códigos que fazem a mesma coisa.

{{ ['false', 'true'][true] }}

let test = true? "true": "false";

echo true? "true": "false";

A ideia é usar conversão de tipo e transformar boolean em index do array, assim sendo equivalente a usar ternary como no js e php.

Ordem do array

A ordem que os itens são colocados no array é importante, porque se não observar ela, esse truque não vai funcionar corretamente, veja exemplo errado;

{{ ['true', 'false'][loop.first] }}

Esse código twig vai mostrar o valor inverso do status de loop.first, isto é, quando a variável for true mostra false e vice versa, se for esse seu objetivo OK, mas se quiser que mostre true no quando a variável for true não vai funcionar.

Inversão do primeiro

Logo, para resolver o problema do item acima podemos inverter o sinal do loop.first. Como? Simples com uma negação. Exp:

{{ ['true', 'false'][not loop.first] }}

Assim o seu código vai mostrar true quando a variável for true e false quando false. Porque true está na chave 0 e false na chave 1, então quando loop.first for true e o seu valor invertido retorna a chave 0 e quando false retorna a chave 1.

Suprimir sequência

Como já vimos a inverter a ordem do array, conseguimos acessar a chave 0 quando a nossa variável conter o valor true. E para finalizar podemos suprimir a chave 1 do array, assim:

{{ ['true'][not loop.first] }}

Desta maneira no nosso for somente no primeiro item que teremos o true aparecendo.

Conclusão

Como vimos essa abordagem envolve vários conceitos de programação como conversão de tipo, ordenação de array, negação do resultado, etc.

Esse é mais um truque que espero ter encina|relembrando vocês, sei que pode parecer algo bobo mas é esse tipo de detalhe que me faz sentir estar evoluindo.

Quero saber de vocês, isso vai ajudar? Já sabiam? Vão usar?

E para quem já conhecia esse truque, mostra para os outros como isso é em outras linguagens de programação.