Helpers de Handlebars

Esta página enumera los helpers personalizados de Handlebars disponibles para usar en las plantillas, agrupados por tipo, junto con una descripción de lo que hace cada uno y un ejemplo práctico.

Contenido & Strings

concat

Concatena cualquier número de argumentos en una única cadena.

{{concat "Hola, " "Mundo" "!"}}

> Hola, Mundo!

format

Formatea un valor según un tipo dado. Actualmente admite "number", usando Intl.NumberFormat con un objeto de opciones opcional (por ejemplo, locale, número mínimo/máximo de decimales). Usa el locale pt-PT por defecto cuando no se especifica ninguno.

{{format "number" 1234.5}}

> 1 234,5

{{format "number" 1234.5 '{"locale":"en-US"}'}}

> 1,234.5

includes

Comprueba si arg1 contiene arg2. Funciona con strings y arrays (los arrays de un solo elemento se desempaquetan antes de la comparación). Pase true como tercer argumento para una comparación sin distinción entre mayúsculas y minúsculas. Devuelve false si alguno de los argumentos es null.

{{includes "Hola Mundo" "Mundo"}}

> true

{{includes "Hola Mundo" "mundo" true}}

> true

markdown

Convierte una cadena en formato Markdown a HTML. Si no se proporciona texto, devuelve una cadena vacía.

{{markdown "**Importante:** por favor revisa esto."}}

> <p><strong>Importante:</strong> por favor revisa esto.</p>

pasteInRm

Construye un payload JSON usado para pegar automáticamente valores de campos en instancias de RecordM. Acepta una lista alternada de pares nombre/valor de campo (clave1 valor1 clave2 valor2 ...) y devuelve un objeto JSON convertido en cadena que describe los campos y la opción auto-paste-if-empty. Devuelve una cadena vacía si no se proporcionan pares.

{{pasteInRm "nombre" "Juan Pérez" "edad" 30}}

> {"opts":{"auto-paste-if-empty":true},"fields":[{"value":"Juan Pérez","fieldDefinition":{"name":"nombre"}},{"value":30,"fieldDefinition":{"name":"edad"}}]}

replace

Sustituye la primera aparición de oldValue por newValue dentro de una cadena. Devuelve una cadena vacía si word no es una cadena.

{{replace "Hola Mundo" "Mundo" "Handlebars"}}

> Hola Handlebars

startsWith

Comprueba si arg1 (una cadena) empieza con arg2.

{{#if (startsWith "Sr. García" "Sr.")}}
  Saludo formal
{{/if}}

> Saludo formal

Listas & Arrays

createVar

Establece varsObject[varName] = value, permitiendo guardar un valor en un objeto compartido para su reutilización posterior dentro de una plantilla. No devuelve ningún valor.

{{createVar misVars "total" 42}}
{{misVars.total}}

> 42

every

Recorre las claves/valores de un objeto o array, evaluando una expresión JavaScript (evalCode) para cada elemento, y devuelve true solo si todos los elementos satisfacen la expresión; en caso contrario devuelve false. Dentro de evalCode, key y val hacen referencia a la clave y al valor del elemento actual.

{{every usuarios "val.edad >= 18"}}

> true

Dado usuarios = [{"edad": 20}, {"edad": 25}]

filter

Recorre las claves/valores de un objeto o array, evaluando una expresión JavaScript (evalCode) para cada elemento, y devuelve un nuevo objeto/array que contiene solo los elementos para los que la expresión es verdadera. Dentro de evalCode, key y val hacen referencia a la clave y al valor del elemento actual. Devuelve un array vacío si no hay coincidencias.

{{filter usuarios "val.edad >= 18"}}

> [{"edad": 20}, {"edad": 30}]

Dado usuarios = [{"edad": 15}, {"edad": 20}, {"edad": 30}]

listFilter

Filtra una lista de objetos, conservando solo aquellos cuyo field coincide con value (funciona tanto con valores directos como con valores de campo de tipo array, comparando como cadenas). Si first es "true", se devuelve solo la primera coincidencia. Devuelve null si no hay coincidencias.

{{listFilter tickets "status" "open"}}

> [{"status": "open"}]

Dado tickets = [{"status": "open"}, {"status": "closed"}]

{{listFilter tickets "status" "open" "true"}}

> [{"status": "open"}]

listSort

Ordena un array, opcionalmente por un campo dado, en orden ascendente ("asc") o descendente (por defecto).

{{listSort tickets "prioridad" "asc"}}

> [{"prioridad": 1}, {"prioridad": 2}, {"prioridad": 3}]

Dado tickets = [{"prioridad": 3}, {"prioridad": 1}, {"prioridad": 2}]

lookupWithDefault

Busca key en obj y devuelve su valor, o defaultValue si el valor es falso/inexistente.

{{lookupWithDefault usuario "apodo" "N/D"}}

> N/D

Dado usuario = {"nombre": "Juan"} (sin apodo)

some

Recorre las claves/valores de un objeto o array, evaluando una expresión JavaScript (evalCode) para cada elemento, y devuelve true en cuanto un elemento satisface la expresión; en caso contrario devuelve false. Dentro de evalCode, key y val hacen referencia a la clave y al valor del elemento actual.

{{some usuarios "val.edad < 18"}}

> true

Dado usuarios = [{"edad": 20}, {"edad": 15}]

times

Helper de bloque que repite su contenido n veces, proporcionando al bloque el índice de la iteración actual (empezando en 1).

{{#times 3}}
  Elemento {{this}}
{{/times}}

> Elemento 1 Elemento 2 Elemento 3

Lógica & Comparación

and

Devuelve el AND lógico de dos argumentos.

{{#if (and estaActivo estaVerificado)}}
  Cuenta aprobada
{{/if}}

> Cuenta aprobada

Dado estaActivo = true y estaVerificado = true

eq

Comprueba si dos valores son iguales. Si ambos argumentos son arrays, compara sus primeros elementos como arrays; en caso contrario, realiza una comparación simple (==).

{{#if (eq status "open")}}
  El ticket está abierto
{{/if}}

> El ticket está abierto

Dado status = "open"

greaterOrEq

Helper de bloque. Renderiza el bloque si arg1 >= arg2 (comparación numérica); en caso contrario renderiza el bloque inverso.

{{#greaterOrEq 75 70}}
  Aprobado
{{else}}
  Reprobado
{{/greaterOrEq}}

> Aprobado

greaterThan

Devuelve true si arg1 > arg2 (comparación numérica; arg1 asume 0 por defecto si es falso).

{{#if (greaterThan 75 70)}}
  Por encima del umbral
{{/if}}

> Por encima del umbral

lesserOrEq

Helper de bloque. Renderiza el bloque si arg1 <= arg2 (comparación numérica); en caso contrario renderiza el bloque inverso.

{{#lesserOrEq 40 50}}
  Bajo
{{else}}
  Alto
{{/lesserOrEq}}

> Bajo

lessThan

Devuelve true si arg1 < arg2 (comparación numérica; arg1 asume 0 por defecto si es falso).

{{#if (lessThan 40 50)}}
  Por debajo del umbral
{{/if}}

> Por debajo del umbral

not

Devuelve la negación lógica de su argumento.

{{#if (not estaOculto)}}
  Visible
{{/if}}

> Visible

Dado estaOculto = false

or

Devuelve el OR lógico de dos argumentos.

{{#if (or tieneRolAdmin tieneRolEditor)}}
  Puede editar
{{/if}}

> Puede editar

Dado tieneRolAdmin = false y tieneRolEditor = true

Matemáticas

add

Suma dos valores numéricos. arg1 asume 0 por defecto si es falso.

{{add 5 3}}

> 8

div

Divide a por b, devolviendo un resultado decimal. Devuelve 0 si alguno de los argumentos es falso o cero.

{{div 10 4}}

> 2.5

max

Devuelve el mayor de dos números.

{{max 10 20}}

> 20

min

Devuelve el menor de dos números.

{{min 10 20}}

> 10

multiply

Multiplica arg1 por arg2. Ambos asumen 0 por defecto si son falsos.

{{multiply 6 7}}

> 42

subtract

Resta arg2 de arg1. Ambos asumen 0 por defecto si son falsos.

{{subtract 10 4}}

> 6

Fechas & Tiempo

compareDates

Compara dos fechas (aceptando cadenas de fecha o timestamps), ignorando la hora del día. Devuelve -1 si la primera fecha es anterior, 1 si es posterior, o 0 si caen en el mismo día.

{{compareDates "2024-01-01" "2024-01-02"}}

> -1

compareDateTimes

Igual que compareDates, pero también tiene en cuenta las horas y minutos al determinar la igualdad.

{{compareDateTimes "2024-01-01T10:00:00" "2024-01-01T09:00:00"}}

> 1

dateInfo

Dada una cadena de fecha y una palabra clave, devuelve un valor de fecha derivado. Palabras clave admitidas: LastDateOfYear, FirstDateOfYear, LastDateOfMonth, FirstDateOfMonth, MonthText, FullDateText, WeekDayText, FullYear, MonthIndexAt1, FirstEpochOfYear, LastEpochOfYear, FirstEpochOfMonth, LastEpochOfMonth, FirstEpochOfDay, LastEpochOfDay. Devuelve una cadena vacía si no se proporciona una cadena de fecha, o undefined para una palabra clave no reconocida.

{{dateInfo "2024-03-15" "FirstDateOfMonth"}}

> 2024-03-01T00:00:00.000Z

La hora exacta depende de la zona horaria del servidor.

{{dateInfo "2024-03-15" "MonthText"}}

> Mar

dateInfoTimestamp

Dado un timestamp Unix y una palabra clave, devuelve una cadena de fecha/hora formateada. Palabras clave admitidas: FullDateTime, FullDate, FullTime, FullWithWeekDay, WeekDay. Devuelve "No date." si no se proporciona ningún timestamp o si la palabra clave no es reconocida.

{{dateInfoTimestamp 1710500000000 "FullDate"}}

> 15/03/2024

El formato exacto depende del locale y la zona horaria del navegador.

nextPage

Avanza una fecha o número hacia adelante en un tamaño de paso determinado, útil para controles de paginación/navegación. Para fechas, size es una cadena como "1d", "2w", "1m" o "1y" (días/semanas/meses/años). Para números, size se suma directamente. Un limit opcional limita el resultado para que no vaya más allá de una fecha o número determinado.

{{nextPage "2024-01-15" "1m"}}

> 2024-02-15T00:00:00.000Z

{{nextPage 10 10 100}}

> 20

prevPage

Igual que nextPage, pero se mueve hacia atrás en lugar de hacia adelante.

{{prevPage "2024-01-15" "1m"}}

> 2023-12-15T00:00:00.000Z

{{prevPage 10 10 0}}

> 0

today

Devuelve la fecha/hora actual como una cadena ISO 8601.

{{today}}

> 2026-08-07T09:15:00.000Z

todayTimestamp

Devuelve la fecha/hora actual como un timestamp Unix en milisegundos.

{{todayTimestamp}}

> 1786100514408

Entorno & Contexto

isNaked

Devuelve true si la aplicación se está ejecutando actualmente en modo "naked".

{{#if (isNaked)}}
  Interfaz simplificada
{{/if}}

> Interfaz simplificada

Se muestra cuando la aplicación está en modo naked.

screenMd

Devuelve true si el ancho actual del viewport es de 768px o menos.

{{#if (screenMd)}}
  Mostrar menú móvil
{{/if}}

> Mostrar menú móvil

Se muestra cuando el viewport tiene 768px o menos de ancho.

screenSm

Devuelve true si el ancho actual del viewport es de 640px o menos.

{{#if (screenSm)}}
  Mostrar diseño compacto
{{/if}}

> Mostrar diseño compacto

Se muestra cuando el viewport tiene 640px o menos de ancho.