Helpers de bloco. Mudança de contexto de um layout Handlebars

Usos e exemplos de helpers e templates de bloco. Ao escrever layouts Mustache para Handlebars podemos usar certos blocos em outros contextos, que se chamam helpers de bloco.

Por Eduard Tomás - Tradução CRV


Publicado em: 28/6/13
Valorize este artigo:
 
As helpers de bloco em Handlebars nos permitem mudar o contexto. Nos exemplos vistos até agora no Manual de Handlebars temos trabalhado sempre dentro do mesmo contexto, mas também podemos restringi-lo a um sub-bloco em um contexto diferente.

Podemos entender contextos como níveis de profundidade no arquivo JSON. Nós, nos layouts, podemos entrar em um nível mais profundo para acessar as propriedades disponíveis nesse contexto.

Vejamos os seguintes códigos de layouts Handlebars:

<ul>
{{# each Beers}}
<li>Name: {{Name}} - Abv: {{Italize Abv}} {{ShowStar Favorite}}
<p>Drinked by: {{Twitter LastCheckin.Drinker}} at {{LastCheckin.When}}</p>
</li>
{{/each}}
</ul>

Nesse código usamos sempre o mesmo contexto. Para chamar o helper Twitter indicamos o dado "LastCheckin.Drinker" para nos movermos entre níveis do JSON.

Agora vejamos este outro código, que faria o mesmo exatamente, mas efetuando uma mudança de contexto.

<ul>
{{# each Beers}}
<li>Name: {{Name}} - Abv: {{Italize Abv}} {{ShowStar Favorite}}
{{#with LastCheckin}}
<p>Drinked by: {{Twitter Drinker}} at {{When}}</p>
{{/with}}
</li>
{{/each}}
</ul>

A diferença é que no primeiro layout, para acessar "Drinker", usávamos "LastCheckin.Drinker" e agora, ao termos mudado de contexto, só usamos "Drinker". Com o helper {{#with LastCheckin}} indico que vou me mover para o contexto dos dados que há sob a propriedade "LastCheckin". A seguir, no bloco que se encontra entre "with" e "/with", podemos usar as propriedades de "LastCheckin" tranquilamente, sem necessidade de indicar o caminho completo para acessá-las.

Isto se consegue em helper que nos implemente um "contexto de bloco" e o criamos mediante a implementação de um código como este:

Handlebars.registerHelper('with', function (context, options) {
return options.fn(context);
});

Usamos também "registerHelper" com o nome deste helper. Tudo absolutamente normal, mas tem a diferença de que a função do helper recebe dois parâmetros, o contexto e algumas opções. O contexto é o objeto geral e "options" é o subtemplate. É um objeto próprio de Handlebars que expõe uma função "fn" que permite renderizar esse subtemplate no contexto que você necessite.

A seguir podemos ver outro template de bloco que geramos usando um helper chamado "list". Este helper, cujo código encontraremos um pouquinho mais abaixo, já produz a estrutura de lista HTML UL e realiza a iteração entre todos os elementos do JSON.

{{#list Beers}}
Name: {{Name}} - Abv: {{Italize Abv}} {{ShowStar Favorite}}
{{#with LastCheckin}}
<p>Drinked by: {{Twitter Drinker}} at {{When}}</p>
{{/with}}
{{/list}}

Para dar suporte a este template, no que usamos o helper "list", temos que criar a própria função do helper. Se trata de outro dos denominados "helpers de bloco", que realiza uma lista e que criamos de propósito para o exercício.

Handlebars.registerHelper('list', function (context, block) {
   var ret = "<ul>";
for (var i = 0, j = context.length; i < j; i++) {
ret = ret + "<li>" + block.fn(context[i]) + "</li>";
}
return ret + "</ul>";
});

No código, vemos que é gerada a lista UL usando outro contexto. É uma espécie de looping "each" de Handlebars, mas criado por nós mesmos em um helper de bloco que mostra o conteúdo em uma lista.

Nota: Como você pode ter imaginado, as estruturas que já vêm de serie em Handlebars como "each" ou "if", internamente estão desenvolvidas por meio de helpers, só que você já tem esses helpers programados na biblioteca.

Com isto terminam os exemplos sobre Handlebars, a biblioteca Javascript para criar layouts em Javascript. Se você quiser, pode baixar um zip com os exemplos revisados nestes artigos.





Comentários do artigo
Foi enviado 1 comentário ao artigo
1 comentário não revisado
0 comentários revisados

Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato