Componentes e helpers utilizados nas views do Ember podem receber blocos, como é o caso do if
:
{{#if cliente.ativo}}
<span class="ativo">Cliente {{cliente.nome}} está ativo</span>
{{else}}
<button {{action "ativar"}}>
{{/if}}
O que delimita o início e fim de um blocos são os operadores #
e /
prefixados ao nome do componente.
Há casos de componentes que operam tanto com blocos como na versão sem blocos, como é o caso do link-to
:
{{#link-to 'clientes'}}
Lista de Clientes
{{/link-to}}
{{link-to 'Lista de Clientes' 'clientes'}}
Os dois formatos renderizam o seguinte HTML:
<a href="/clientes">Lista de Clientes</a>
Como blocos funcionam nos componentes ?
Vamos fazer um pequeno componente para exemplificar:
ember generate component mostrar-cliente
Este comando gera os dois arquivos básicos para o funcionamento de um componente:
.js
onde você programa o comportament.hbs
que é o template do componenteVamos focar no segundo. Um novo template de componente possui apenas a instrução yield
:
<!-- components/mostrar-cliente/template.hbs -->
{{yield}}
Esta instrução diz que seu componente pode receber um bloco, e que todo código do bloco será inserido neste trecho do yield
. Confuso ? Exemplo:
<!-- components/mostrar-cliente/template.hbs -->
<h3>Minha lista de clientes:</h3>
{{yield}}
<ul>
<li>João</li>
<li>Maria</li>
</ul>
<!-- clientes/template.hbs -->
{{#mostrar-cliente}}
<p>Ordenado por nome</p>
{{/mostrar-cliente}}
Resulta no seguinte HTML:
<h3>Minha lista de clientes:</h3>
<p>Ordenado por nome</p>
<ul>
<li>João</li>
<li>Maria</li>
</ul>
Repare que o mostra-cliente
foi chamado com #
e /
, ou seja, foi passado um bloco ao componente, que foi renderizado no yield
.
Mas nem sempre seu componente precisa aceitar blocos, portanto é seguro remover o yield
e assim você pode chamar seu componente pela forma simplificada sem passar um bloco:
{{mostrar-cliente}}