Entendendo blocos do Ember - Handlebars

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:

• O arquivo .js onde você programa o comportament
• O arquivo .hbs que é o template do componente

Vamos 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}}