Enlaces de datos y expresiones · Docs

Un enlace de datos reemplaza un valor fijo por una expresión que lee datos en vivo. Se pueden enlazar textos, enlaces, imágenes, atributos, la visibilidad y valores de estilo. Cuando los datos cambian, solo se actualizan las partes enlazadas de la página.

Enlazar un valor

En el inspector, pasa el cursor sobre un campo y presiona su botón bind. Escribe una expresión; el autocompletado sugiere variables, campos de consultas, campos del ítem y funciones del ámbito actual, y la vista previa muestra el resultado con datos en vivo. Quita el enlace para volver a un valor fijo.

Expresiones

Las expresiones usan un subconjunto seguro de la sintaxis de JavaScript: literales, template strings, arreglos y objetos con spread, acceso a propiedades con ?., aritmética, comparaciones, &&, ||, ??, el operador ternario, llamadas a métodos y funciones flecha de una línea como argumentos.

// Text
item.title.toUpperCase()
fn.formatCurrency(item.price, 'EUR', 'de-DE')
`${fn.length(queries.cart.data)} items`

// Visibility (hide when this is true)
!user.isLoggedIn

// Style
item.stock > 0 ? 'var(--color-fg)' : 'var(--color-muted)'

// Lists
queries.products.data.filter(p => p.featured).slice(0, 3)
fn.sortBy(queries.posts.data, 'date', 'desc')

Qué puedes leer

varsVariables de página y de sitio. Una variable de página oculta a una variable de sitio con el mismo nombre.

queriesCada consulta como { data, loading, error, updatedAt }.

item, index, parentDentro de listas de colección y páginas plantilla: el ítem actual y su posición.

userEl visitante: { isLoggedIn, id, email, name, emailVerified, roles, meta }.

pageLa ruta: path, params (como :slug) y query string.

siteEl nombre y el idioma del sitio.

fnFunciones incluidas y tus propias fórmulas: fn.formatDate(…), fn.myFormula(…).

steps, input, event, errorDentro de los flujos de trabajo: los resultados de pasos anteriores, la entrada, el evento que lo disparó y un error capturado.

Enlaces bidireccionales para inputs

Los controles de formulario se pueden enlazar en ambos sentidos con $model: escribir actualiza la variable, y cambiar la variable actualiza el input. Úsalo para cajas de búsqueda y filtros, y luego lee la variable en la entrada de una consulta para que los resultados se vuelvan a obtener mientras el visitante escribe.

json

"text":   { "$expr": "item.title" },
"hidden": { "$expr": "!user.isLoggedIn" },
"value":  { "$model": "vars.search" }

Fórmulas

Las fórmulas son tus propias funciones reutilizables, definidas en el espacio de trabajo Data con parámetros y una expresión como cuerpo, y se llaman como fn.name(…) en cualquier lugar. Consulta la referencia de expresiones para ver todas las funciones incluidas.

Qué se envía a los visitantes

Las páginas sin enlaces de datos no envían nada de JavaScript. Las partes enlazadas se convierten en pequeñas islas: el HTML se renderiza en el servidor, y un runtime ligero solo actualiza los valores enlazados en el navegador. Los estilos enlazados se compilan como variables CSS definidas por elemento.