Handlebars

Autobase permite utilizar Handlebars en todas las propiedades de página y componentes, con excepción de los eventos (onInit, onLoad, onClick, onPageChange, onChange) y la propiedad modules de la página, cuyos valores se interpretan como código Lua y no procesan variables.

Algunos ejemplos de propiedades donde se usa frecuentemente:

• itemTemplateName del componente LIST.
• templateName del componente LIST.
• templateName del componente DISPLAY.

El uso básico es para reemplazar una variable.

<p>{{nombre}}</p>

También se pueden utilizar algunos helpers que trae Autobase para insertar assets (imágenes, íconos) o íconos de Tabler.

Assets

Los assets son imágenes o íconos (png, jpg, svg, etc) que el usuario incluyó en la carpeta del proyecto.

El helper asset recibe el path relativo al archivo y devuelve la URL pública correspondiente para usarla en atributos como src o href.

Parámetros

Parámetro	Posición	Tipo	Descripción
path	0	string	Requerido. Path relativo al archivo dentro de la carpeta del proyecto.

Ejemplos

Imagen referenciada desde la carpeta assets:

<img src="{{ asset 'assets/rocket.svg' }}" />

Ícono SVG como imagen:

<img src="{{ asset 'assets/icons/logo.png' }}" />

Notas

• El helper acepta exactamente un parámetro; omitirlo o pasar más de uno lanzará un error.
• El path no puede estar vacío.
• No se permiten rutas con .. por razones de seguridad.
• Las barras invertidas (\) se convierten automáticamente a barras (/).

Íconos

Autobase permite utilizar los íconos de Tabler desde los templates de handlebars.

{{ icon 'home' }}

Crédito: Autobase utiliza los íconos de Tabler Icons, que están disponibles bajo licencia MIT. Puedes explorar todos los íconos disponibles en el sitio oficial de Tabler.

Parámetros

El helper icon acepta los siguientes parámetros, ya sea por posición o por nombre:

Parámetro	Posición	Tipo	Descripción
name	0	string	Requerido. Nombre del ícono de Tabler (ej: 'home', 'user').
style	1	string	Estilo del ícono: 'outline' (por defecto) o 'filled'.
class	2	string	Clases CSS adicionales que se agregan al elemento <svg>.
size	3	number	Tamaño en píxeles para el ancho y alto del <svg>.

Ejemplos

Ícono básico:

{{ icon 'home' }}

Ícono con estilo filled:

{{ icon 'home' 'filled' }}

Ícono con clase CSS personalizada:

{{ icon 'home' 'outline' 'text-primary' }}

Ícono con tamaño personalizado:

{{ icon 'home' 'outline' '' 24 }}

Usando parámetros nombrados:

{{ icon name='home' style='filled' class='text-primary' size=24 }}

Notas

• Si el estilo solicitado no existe para el ícono, se intentará utilizar automáticamente el estilo outline como fallback.
• Si el ícono no se encuentra, no se renderiza nada.