ForgejComponent
fr

jComponent 20 (frontend)

Composants, plugins, liaison de données et tout ce qui s’exécute dans le navigateur.

RecetteÉtiquettes

Démarrer avec jComponent 20

Chargez le bundle jComponent, définissez une valeur dans l'état global et affichez-la avec un élément ui-bind.

jcomponentfrontendbinding

Lire, modifier et surveiller l'état

Utilisez SET, GET, UPD, PUSH et WATCH pour travailler avec l'état global et réagir quand un chemin change.

jcomponentfrontendstate

Écrire un composant jComponent personnalisé

Enregistrez un composant réutilisable avec COMPONENT(), rendez-le dans make(), réagissez aux changements d'état dans setter() et réécrivez avec set().

jcomponentfrontendcomponents

Configurer un composant et le reconfigurer plus tard

Donnez à un composant des options par défaut, remplacez-les dans l'attribut config, réagissez dans configure() et modifiez-les à l'exécution avec reconfigure().

jcomponentfrontendcomponents

Cycle de vie d'un composant : make, setter et destroy

Sachez quand jComponent crée, met à jour et supprime un composant, et nettoyez minuteurs et écouteurs dans destroy().

jcomponentfrontendcomponents

Valider la saisie avec le validate() d'un composant

Implémentez validate() dans un composant, lisez les états invalid, touched et modified, et trouvez les champs invalides avec ERRORS().

jcomponentfrontendvalidationforms

Préfixes de route: courants, listes de code, étapes temporaires et plugins

Le premier caractère d'un chemin jComponent choisit où vit la valeur : * l'état commun, # les listes de code, % l'État temporaire, ? l'Etat et le plugin|La propriété d’un objet de plug-in.

jcomponentfrontendpathsstate

Charger une bibliothèque avant qu'un composant démarre

Listez des scripts et des styles comme dépendances d'un composant pour que jComponent les télécharge une fois et démarre le composant ensuite.

jcomponentfrontendcomponentsdependencies

Étendre des composants et des plugins avec EXTENSION

Ajoutez un comportement à un composant existant depuis l'extérieur, sans modifier son code source, avec EXTENSION().

jcomponentfrontendcomponents

Afficher, masquer et styliser des éléments avec ui-bind

Utilisez les commandes ui-bind pour basculer la visibilité, les classes et le HTML depuis l'état, sans écrire de code DOM.

jcomponentfrontendbinding

Rendre des listes avec un template ui-bind

Placez un template Tangular dans ui-bind avec la commande template pour rendre des tableaux et des objets chaque fois que les données changent.

jcomponentfrontendbindingtemplates

Plus de commandes ui-bind : attributs, valeurs, état et formatage

Définissez du HTML, des attributs, des valeurs de formulaire, l'état désactivé et un format de texte depuis l'état avec les commandes ui-bind.

jcomponentfrontendbinding

référence ui-bind : chaque commande, option et attribut

Toutes les commandes de ui-bind avec ce que chacune fait, les options qui contrôlent le moment de son exécution et les attributs qui choisissent l'élément cible.

jcomponentfrontendbindingreference

Référence d'instance de composant : propriétés et méthodes de self

La déclaration d'un composant jComponent 20 et ce que son instance (elle-même) offre: propriétés, méthodes de valeur, assistants DOM, événements, observateurs et commandes.

jcomponentfrontendcomponentsreference

Regrouper l'état et la logique dans un plugin jComponent

Déclarez un plugin avec PLUGIN() et attachez-le à une partie de la page avec ui-plugin, en utilisant ? comme son propre chemin.

jcomponentfrontendplugins

Router des pages dans le navigateur sans rechargement

Enregistrez des routes côté client avec ROUTE(), naviguez avec REDIRECT(), lisez les paramètres de l'URL et la query string depuis NAV et revenez en arrière dans l'historique.

jcomponentfrontendroutingspa

Charger des parties d'une page avec ui-import

Récupérez une partie HTML du serveur dans un élément avec ui-import ou IMPORT(), et laissez cette partie porter ses propres composants.

jcomponentfrontendimport

Appeler du code avec des commandes et EXEC

Enregistrez des commandes avec component.command() et appelez-les avec CMD(), ou appelez une méthode de plugin avec EXEC('plugin/method').

jcomponentfrontendcommands

Envoyer des événements entre composants avec ON et EMIT

Découplez des parties de la page avec des événements globaux : EMIT() annonce quelque chose, ON() écoute, OFF() arrête d'écouter.

jcomponentfrontendevents

Stocker des données dans le navigateur avec CACHE, PREF et COOKIES

Conservez des valeurs entre les visites avec CACHE (avec expiration), PREF (préférences de l'utilisateur) et COOKIES.

jcomponentfrontendstorage

Partager des réglages avec ENV et la syntaxe [key]

Enregistrez des valeurs avec ENV() et utilisez-les dans les URL et la configuration des composants avec le marqueur [key].

jcomponentfrontendconfig

Charger des données depuis une route Total.js avec AJAX

Appelez une route Total.js depuis la page avec AJAX() et placez la réponse dans l'état de jComponent.

jcomponentfrontendajaxrouting

Appeler les routes API de Total.js avec API()

Utilisez API(url, name, data, callback) pour appeler les actions d'un endpoint ROUTE('API ...'), erreurs de validation comprises.

jcomponentfrontendajaxapi

Téléverser des fichiers avec UPLOAD() et la progression

Envoyez un FormData à une route @upload de Total.js avec UPLOAD() et suivez la progression.

jcomponentfrontenduploadfiles

Petits helpers : GUID, HASH, parseConfig, format et group

Utilisez les fonctions utilitaires qu'ajoute jComponent : ids aléatoires, hashes, chaînes de configuration, mise en forme du texte et des dates, et regroupement.

jcomponentfrontendutilities

Raccourcis d'état : INC, TOGGLE, NUL, UPDATE, UNWATCH, WAIT, BLOCKED et CACHEPATH

De petites fonctions qui modifient ou surveillent une valeur de l'état par son chemin, attendent qu'une valeur existe, exécutent quelque chose une seule fois par période et gardent une valeur de l'état dans le cache.

jcomponentfrontendstateutilities

Aides pour les données : QUERIFY, STRINGIFY, ENCRYPT, FN, CL, TRANSLATE, UNAUTHORIZED et Thelpers

Construisez des chaînes de requête, écrivez du JSON sans ce que vous ne voulez pas, encodez une valeur avec une clé, compilez une expression, chargez des listes de valeurs, traduisez des textes, vérifiez des permissions et ajoutez des aides aux modèles.

jcomponentfrontendutilitiestemplates

Aides DOM : ATTRD, HIDDEN, VISIBLE, WIDTH, STYLE, NODEMOVE, DIFFDOM et APPEARANCE

Lisez des attributs data, demandez si un élément est affiché ou à l'écran, ajoutez des styles remplaçables, déplacez des éléments dans leur parent, mettez à jour une liste sans la redessiner et réglez les couleurs et le mode sombre de la page.

jcomponentfrontenddomutilities

Trouver et appeler composants et plugins : FIND, COMPONENTS, SETTER, EXE, TAPI, MIDDLEWARE et ADAPT

Cherchez les composants de la page par nom ou chemin, appelez une méthode de plusieurs composants à la fois, appelez des fonctions par nom, utilisez deux adresses d'API avec TAPI et PIPE, exécutez un middleware avant une route et remplacez les marqueurs d'un texte.

jcomponentfrontendcomponentsapi

Déclencher des flags de chemin personnalisés avec FLAGS

Exécutez des flags personnalisés, observez leurs événements et distinguez-les des changements du modèle et des flags d'état réservés.

jcomponentflagseventspaths