Este artículo explora cómo integrar variables y lógica dinámica dentro de bloques Markdown mediante el motor de plantillas Handlebars. Aprenderás a renderizar contenido condicional y a iterar sobre colecciones de datos directamente en tu documento Markdown.

Introducción a Handelbars para Markdown

El motor Handlebars permite superar la naturaleza estática del Markdown puro. Al habilitarlo en la configuración de un bloque Markdown, puedes insertar expresiones y bloques de control que reaccionan a los datos de tu aplicación.

Su función principal es transformar datos en vistas. Utiliza expresiones entre dobles llaves {{ }} para mostrar valores y sentencias de control como #if, #each para gestionar la lógica de presentación.

Casos de Uso Prácticos

Renderizado Condicional de Estados

Imagina un sistema que debe mostrar diferentes mensajes según el estado de una solicitud. Define los estados y sus respectivas visualizaciones:

Utiliza la sintaxis condicional de Handlebars para implementar la lógica.

Sentencia #if Básica

{{#if (igual valor1 valor2)}}
  <p>El contenido coincide.</p>
{{/if}}

Manejo de Alternativas con #else

{{#if (igual estado_actual "aprobado")}}
  <p>Aprobado.</p>
{{else}}
  <p>No aprobado.</p>
{{/if}}

Cadenas de Condiciones Múltiples

{{#if (igualcodigo "ERR_AUTH")}}
  <p>Error de autenticación.</p>
{{else if (igual codigo "ERR_TIMEOUT")}}
  <p>Tiempo de espera agotado.</p>
{{else if (igual codigo "ERR_404")}}
  <p>Recurso no encontrado.</p>
{{else}}
  <p>Error desconocido.</p>
{{/if}}

Implementación de una Vista de Estado Dinámico

Integra la lógica anterior en un bloque Markdown completo. El siguiente ejemplo asume que tienes acceso a un campo sol.estado.

{{#if sol.estado}}
  <div>
    {{#if (igual sol.estado "1")}}
      <span style="color: orange;">⏳ En Revisión</span>
      <p>Solicitud recibida. Está pendiente de aprobación interna.</p>
    {{else if (igual sol.estado "2")}}
      <span style="color: #1890ff;">💳 Pendiente de Pago</span>
      <p>Esperando confirmación del pago del cliente.</p>
    {{else if (igual sol.estado "3")}}
      <span style="color: #52c41a;">✔ Pagado</span>
      <p>Pago recibido. El equipo de soporte se pondrá en contacto.</p>
    {{else if (igual sol.estado "4")}}
      <span style="color: #f5222d;">✖ Rechazado</span>
      <p>La solicitud fue denegada. Revise los motivos e intente nuevamente.</p>
    {{/if}}
  </div>
{{else}}
  <p>No hay estado disponible para esta solicitud.</p>
{{/if}}

Iterando sobre Colecciones de Datos

Para mostrar listas, como los ítems de una orden, usa la sentencia #each. Esta permite recorrer arreglos y acceder a cada elemento.

Dentro del bucle, this hace referencia al elemento actual, y @index proporciona el índice de la iteración.

Estructura Básica de #each

{{#each lista}}
  <li>{{this.nombre}} - Índice: {{@index}}</li>
{{/each}}

Plantilla para Detalle de Ítems

Asumiendo una estructura de datos con $registro.items_orden, puedes construir una tabla deatllada.

{{#if $registro.items_orden}}
  <table>
    <thead>
      <tr>
        <th>#</th>
        <th>Producto</th>
        <th>Costo Unitario</th>
        <th>Unidades</th>
        <th>Subtotal</th>
      </tr>
    </thead>
    <tbody>
      {{#each $registro.items_orden}}
        <tr style="{{#if this.sin_stock}}color: red;{{/if}}">
          <td>{{@index}}</td>
          <td>{{this.articulo.nombre}}</td>
          <td>${{this.costo}}</td>
          <td>{{this.cantidad}}</td>
          <td>${{multiplicar this.costo this.cantidad}}</td>
          <td>
            {{#if this.sin_stock}}
              <span>Agotado</span>
            {{else if this.bajo_stock}}
              <span style="color:orange;">Últimas unidades</span>
            {{/if}}
          </td>
        </tr>
      {{/each}}
    </tbody>
  </table>
  <p>Total de artículos: {{$registro.items_orden.longitud}}</p>
{{else}}
  <p>No se encontraron artículos en el registro.</p>
{{/if}}

Para que campos anidados como this.articulo.nombre sean visibles, asegúrate de que la relación articulo esté incluida en la consulta de datos del componente.

Puedes ocultar visualmente campos técnicos (como articulo) utilizando reglas de visibilidad después de haberlos configurado en la vista de diseño.