jComponent 20 (frontend)
Composants, plugins, liaison de données et tout ce qui s’exécute dans le navigateur.
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.
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.
É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().
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().
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().
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().
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.
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.
É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().
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.
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.
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.
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.
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.
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.
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.
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.
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').
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.
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.
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].
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.
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.
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.
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.
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.
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.
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.
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.
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.