18.03.2025

Passando Variáveis em Partials no Handlebars.js

Resposta Rápida

Para passar variáveis para templates Handlebars, você precisará de um helper do Handlebars. Aqui está um exemplo de como criar um helper em JavaScript que permite adicionar uma variável extra ao contexto atual e usá-la no seu template Handlebars:

Handlebars.registerHelper('includeWithVar', function(extraVar, options) {
  return options.fn(Object.assign({}, this, { extraVar }));
});

Para passar a variável extraVar para o partial incluído myPartial, você pode chamar o helper assim:

{{#includeWithVar myVariable}}
  {{> myPartial}}
{{/includeWithVar}}

Agora, a variável myVariable é acessível no template myPartial como {{extraVar}}.

Uso Eficiente dos Partials em Templates Handlebars

Usar templates Handlebars é conveniente para criar código modular e facilmente reutilizável. É essencial saber como passar variáveis entre diferentes partes do template.

Usando Parâmetros Nomeados para Conteúdo Dinâmico

Quando você precisa adicionar um pouco de dinamismo, pode usar parâmetros nomeados:

{{> myPartial headline="Notícias de Última Hora"}}

Variáveis como headline podem ser usadas para renderização condicional em myPartial:

<h1>{{#if headline}}{{headline}}{{else}}Título Padrão{{/if}}</h1>

Mesclando Contextos

Se você precisar passar várias variáveis, pode usar o método de mesclagem de contexto:

Handlebars.registerHelper('withContext', function(context, options) {
  return options.fn(Object.assign({}, this, context));
});

Criando um Contexto Filho

Você pode isolar parte dos dados para evitar que se misturem com o contexto principal:

let contexto = {
  usuario: {
    nome: 'Jane Doe',
    titulos: {
      principal: 'CEO',
      secundário: 'Fundadora'
    }
  }
};

Use parte dos dados em userPartial sem passar o objeto de usuário inteiro.

Resolvedores de Template Dinâmicos

Use helpers personalizados para escolher templates de forma dinâmica:

Handlebars.registerHelper('dynamicPartial', function(name, options) {
  let templateName = Handlebars.partials[`partial_${name}`];
  return new Handlebars.SafeString(templateName(options.hash));
});

Chame a função com um nome dinâmico e argumentos:

{{#dynamicPartial "comentarios" usuario=usuarioObjeto }}

Cenários Complexos e Helpers

Para implementar cenários complexos, helpers personalizados que lidam com várias variáveis e configurações podem ser úteis.

Visualização

Imagine um trem (🚂) transportando correio (📧) de uma cidade para outra:

Cidade Handlebars (🏠): Aqui residem os templates (📄) esperando por conteúdo.
Cidade de Dados (🏙️): Aqui, as variáveis (📦) estão esperando para serem enviadas.

{{> nomePartial }}

Isso é como enviar um vagão vazio. Anexe uma carga de variáveis e sinta a diferença!

{{> nomePartial variavel=pacote }}

Antes: 🚂📄 -- Um trem vazio, sonhos vazios
Depois: 🚂📦📄 -- Um trem com variáveis, cheio de expectativas.

Agora o problema de passar dados está resolvido.

Carregando Partials com um Carregador Personalizado

function loadPartial(name) {
  const template = Handlebars.templates[name];
  Handlebars.registerPartial(name, template);
}

Protegendo Contra Vazamentos de Dados com um Helper Especial

Handlebars.registerHelper('safeString', function(texto, options) {
  return new Handlebars.SafeString(texto);
});

Dessa forma, você pode renderizar HTML não escapado, mas lembre-se da possibilidade de ataques XSS.

Wrapper Contextual para Partials

{{> userPartial usuario=model.usuario }}

Agora, todas as variáveis estão acessíveis através do prefixo usuario., tornando o código mais previsível e compreensível.

Recursos Úteis

1. Handlebars — Documentação Oficial.
2. Partials | Handlebars — Guia para uso de partes.
3. Enviando formulário HTML usando Jquery AJAX - Stack Overflow — Discussão sobre manipulação de formulários.
4. Medium — Artigo sobre contexto e alcance.
5. Guia do Iniciante para Handlebars — SitePoint — Como passar variáveis para partials.
6. Tutorial Handlebars - YouTube — Tutorial em vídeo sobre capacidades avançadas do Handlebars.
7. JSFiddle — Sobre o projeto — Demonstração de código com variáveis contextuais em Handlebars.

Video

Navigation