jComponent 20 (frontend)
Componenti, plugin, data binding e tutto ciò che gira nel browser.
Iniziare con jComponent 20
Carica il bundle jComponent, imposta un valore nello stato globale e mostralo con un elemento ui-bind.
Leggere, cambiare e osservare lo stato
Usa SET, GET, UPD, PUSH e WATCH per lavorare con lo stato globale e reagire quando un percorso cambia.
Scrivere un componente jComponent personalizzato
Registra un componente riutilizzabile con COMPONENT(), renderizzalo in make(), reagisci ai cambi di stato in setter() e riscrivi con set().
Configurare un componente e riconfigurarlo in seguito
Dai a un componente opzioni predefinite, sovrascrivile nell'attributo config, reagisci in configure() e cambiale a runtime con reconfigure().
Ciclo di vita di un componente: make, setter e destroy
Sappi quando jComponent crea, aggiorna e rimuove un componente, e ripulisci timer e listener in destroy().
Validare l'input con il validate() di un componente
Implementa validate() in un componente, leggi gli stati invalid, touched e modified e trova i campi non validi con ERRORS().
Path prefixes: comuni, elenchi di codice, passaggi di stato temporaneo e plugin
Il primo carattere di un percorso jComponent sceglie dove vive il valore: * lo stato comune, # le liste di codice, % lo stato temporaneo, ? lo stato del plugin e il plugin|Il percorso è una proprietà di un oggetto plugin.
Caricare una libreria prima che un componente parta
Elenca script e stili come dipendenze di un componente così jComponent li scarica una volta e avvia il componente dopo.
Estendere componenti e plugin con EXTENSION
Aggiungi comportamento a un componente esistente dall'esterno, senza modificarne il sorgente, con EXTENSION().
Mostrare, nascondere e stilizzare elementi con ui-bind
Usa i comandi di ui-bind per attivare visibilità, classi e HTML dallo stato, senza scrivere codice DOM.
Renderizzare elenchi con un template ui-bind
Metti un template Tangular dentro ui-bind con il comando template per renderizzare array e oggetti ogni volta che i dati cambiano.
Altri comandi di ui-bind: attributi, valori, stato e formattazione
Imposta HTML, attributi, valori di modulo, stato disabilitato e un formato di testo dallo stato con i comandi di ui-bind.
Ui-bind: ogni comando, opzione e attribuzione
Tutti i comandi di ui-bind con ciò che ciascuno fa, le opzioni che controllano quando si esegue, e gli attributi che scelgono l'elemento mirato.
Il riferimento del componente: proprietà e metodi di se stessi
La dichiarazione di un componente jComponent 20 e ciò che la sua instanza (sono) offre: proprietà, metodi di valore, assistenti DOM, eventi, osservatori e comandi.
Raggruppare stato e logica in un plugin jComponent
Dichiara un plugin con PLUGIN() e collegalo a una parte della pagina con ui-plugin, usando ? come suo percorso.
Instradare le pagine nel browser senza ricaricare
Registra rotte lato client con ROUTE(), naviga con REDIRECT(), leggi i parametri dell'URL e la query string da NAV e torna indietro nella cronologia.
Caricare parti di una pagina con ui-import
Recupera una parte HTML dal server dentro un elemento con ui-import o IMPORT() e lascia che la parte porti i propri componenti.
Eseguire codice con i comandi e EXEC
Registra comandi con component.command() e chiamali con CMD(), oppure chiama un metodo di un plugin con EXEC('plugin/method').
Inviare eventi tra componenti con ON ed EMIT
Disaccoppia parti della pagina con eventi globali: EMIT() annuncia qualcosa, ON() ascolta, OFF() smette di ascoltare.
Salvare dati nel browser con CACHE, PREF e COOKIES
Conserva valori tra le visite con CACHE (con scadenza), PREF (preferenze dell'utente) e COOKIES.
Condividere impostazioni con ENV e la sintassi [key]
Registra valori con ENV() e usali negli URL e nella configurazione dei componenti con il segnaposto [key].
Caricare dati da una route Total.js con AJAX
Chiama una route Total.js dalla pagina con AJAX() e metti la risposta nello stato di jComponent.
Chiamare le route API di Total.js con API()
Usa API(url, name, data, callback) per chiamare le azioni di un endpoint ROUTE('API ...'), compresi gli errori di validazione.
Caricare file con UPLOAD() e avanzamento
Invia un FormData a una route @upload di Total.js con UPLOAD() e segui l'avanzamento.
Piccoli helper: GUID, HASH, parseConfig, format e group
Usa le funzioni di supporto che jComponent aggiunge: id casuali, hash, stringhe di configurazione, formattazione di testo e date e raggruppamento.
Scorciatoie dello stato: INC, TOGGLE, NUL, UPDATE, UNWATCH, WAIT, BLOCKED e CACHEPATH
Piccole funzioni che cambiano o osservano un valore dello stato tramite il suo percorso, attendono finché esiste un valore, eseguono qualcosa una sola volta per periodo e mantengono un valore dello stato nella cache.
Helper per i dati: QUERIFY, STRINGIFY, ENCRYPT, FN, CL, TRANSLATE, UNAUTHORIZED e Thelpers
Costruisci stringhe di query, scrivi JSON senza ciò che non vuoi, codifica un valore con una chiave, compila un'espressione, carica liste di valori, traduci testi, controlla permessi e aggiungi helper ai template.
Helper per il DOM: ATTRD, HIDDEN, VISIBLE, WIDTH, STYLE, NODEMOVE, DIFFDOM e APPEARANCE
Leggi attributi data, chiedi se un elemento è mostrato o sullo schermo, aggiungi stili sostituibili, sposta elementi nel loro genitore, aggiorna una lista senza ridisegnarla e imposta i colori e la modalità scura della pagina.
Trovare e chiamare componenti e plugin: FIND, COMPONENTS, SETTER, EXE, TAPI, MIDDLEWARE e ADAPT
Cerca i componenti della pagina per nome o percorso, chiama un metodo di più componenti insieme, chiama funzioni per nome, usa due indirizzi API con TAPI e PIPE, esegui middleware prima di una route e sostituisci i segnaposto di un testo.
Invia flag di percorso personalizzati con FLAGS
Esegui flag personalizzati, osserva i loro eventi e distinguili dalle modifiche del modello e dai flag di stato riservati.