MallaDocs
AccueilDémarrage rapideOuvrir Malla

Liaisons et expressions

Liez n’importe quel texte, attribut, style ou visibilité à une expression qui lit des données en direct.

Guide utilisateur

Une liaison remplace une valeur fixe par une expression qui lit des données en direct. Les textes, les liens, les images, les attributs, la visibilité et les valeurs de style peuvent tous être liés. Quand les données changent, seules les parties liées de la page se mettent à jour.

Lier une valeur

Dans l’inspecteur, survolez un champ et cliquez sur son bouton bind. Tapez une expression ; l’autocomplétion propose les variables, les champs de requête, les champs d’élément et les fonctions du contexte actuel, et l’aperçu affiche le résultat avec des données en direct. Supprimez la liaison pour revenir à une valeur fixe.

Expressions

Les expressions utilisent un sous-ensemble sûr de la syntaxe JavaScript : littéraux, gabarits de chaînes (template strings), tableaux et objets avec décomposition (spread), accès aux propriétés avec ?., arithmétique, comparaisons, &&, ||, ??, l’opérateur ternaire, appels de méthode et fonctions fléchées sur une ligne passées en argument.

js
// 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')

Ce que vous pouvez lire

varsLes variables de page et de site. Une variable de page masque une variable de site du même nom.
queriesChaque requête sous la forme { data, loading, error, updatedAt }.
item, index, parentDans les listes de collection et les pages modèles : l’élément en cours et sa position.
userLe visiteur : { isLoggedIn, id, email, name, emailVerified, roles, meta }.
pageLa route : chemin, paramètres (comme :slug) et chaîne de requête.
siteLe nom et la langue du site.
fnLes fonctions intégrées et vos propres formules : fn.formatDate(…), fn.myFormula(…).
steps, input, event, errorDans les workflows : les résultats des étapes précédentes, l’entrée, l’événement déclencheur et une erreur interceptée.

Liaisons bidirectionnelles pour les champs de saisie

Les contrôles de formulaire peuvent être liés dans les deux sens avec $model : la saisie met à jour la variable, et modifier la variable met à jour le champ. Utilisez-le pour les champs de recherche et les filtres, puis lisez la variable dans l’entrée d’une requête pour que les résultats se rechargent pendant que le visiteur tape.

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

Formules

Les formules sont vos propres fonctions réutilisables, définies dans l’espace de travail Data avec des paramètres et une expression comme corps, et appelées partout sous la forme fn.name(…). Consultez la référence des expressions pour toutes les fonctions intégrées.

Ce qui est envoyé aux visiteurs

Les pages sans liaison n’envoient aucun JavaScript. Les parties liées deviennent de petits îlots : le HTML est généré sur le serveur, et un runtime léger ne met à jour que les valeurs liées dans le navigateur. Les styles liés sont compilés en variables CSS définies par élément.