Estudio de Handlebars.js

• Plantillas semánticas
• Compatible con cualquier formato de salida
• Precompilación de plantillas

• Generación dinámica de HTML
• Plantillas de correo electrónico
• UIs dinámicas

Instalación: npm i handlebars

import Handlebars from 'handlebars';
const t = Handlebars.compile('Hola {{nombre}}');
console.log(t({ nombre: 'Mundo' }));

1. Render con helpers

Plantilla con un helper personalizado.

import Handlebars from 'handlebars';

Handlebars.registerHelper('mayus', (s) => s.toUpperCase());
const t = Handlebars.compile('Hola {{mayus nombre}}');
console.log(t({ nombre: 'ana' })); // Hola ANA

2. Listado con each

Recorre una lista en la plantilla.

import Handlebars from 'handlebars';

const t = Handlebars.compile('{{#each items}}<li>{{this}}</li>{{/each}}');
console.log(t({ items: ['A', 'B', 'C'] }));
// <li>A</li><li>B</li><li>C</li>