jComponent 20 (frontend)
Componenten, plugins, databinding en alles wat in de browser draait.
Aan de slag met jComponent 20
Laad de jComponent-bundel, zet een waarde in de globale state en toon haar met een ui-bind-element.
De state lezen, wijzigen en bekijken
Gebruik SET, GET, UPD, PUSH en WATCH om met de globale state te werken en te reageren wanneer een pad verandert.
Een eigen jComponent schrijven
Registreer een herbruikbare component met COMPONENT(), render hem in make(), reageer op statuswijzigingen in setter() en schrijf terug met set().
Een component configureren en later herconfigureren
Geef een component standaardopties, overschrijf ze in het attribuut config, reageer in configure() en wijzig ze tijdens het draaien met reconfigure().
Levenscyclus van een component: make, setter en destroy
Weet wanneer jComponent een component aanmaakt, bijwerkt en verwijdert, en ruim timers en listeners op in destroy().
Invoer valideren met validate() van een component
Implementeer validate() in een component, lees de statussen invalid, touched en modified en vind ongeldige velden met ERRORS().
Path prefixes: gemeenschappelijke, code lijsten, tijdelijke status en plugins paden
De eerste personage van een jComponent pad kiest waar de waarde leeft: * de gemeenschappelijke staat, # de code lijsten, % de tijdelijke staat, ? de plugin staat en plug-in|Een eigenschap van een plugin object.
Een bibliotheek laden voordat een component start
Som scripts en stijlen op als afhankelijkheden van een component zodat jComponent ze één keer downloadt en de component daarna start.
Componenten en plugins uitbreiden met EXTENSION
Voeg van buitenaf gedrag toe aan een bestaande component, zonder haar broncode te wijzigen, met EXTENSION().
Elementen tonen, verbergen en opmaken met ui-bind
Gebruik ui-bind-commando's om zichtbaarheid, klassen en HTML vanuit de state om te schakelen, zonder DOM-code te schrijven.
Lijsten renderen met een ui-bind-template
Zet een Tangular-template in ui-bind met het commando template om arrays en objecten te renderen telkens wanneer de gegevens veranderen.
Meer ui-bind-commando's: attributen, waarden, status en opmaak
Stel HTML, attributen, formulierwaarden, de uitgeschakelde status en een tekstopmaak in vanuit de state met ui-bind-commando's.
ui-bind referentie: elke opdracht, optie en attribute
Alle bestellingen van ui-bind met wat elk doet, de opties die controleren wanneer het loopt, en de attributen die het doelelement kiezen.
Component instantie verwijzing: eigenschappen en methoden van zichzelf
De verklaring van een jComponent 20 component en wat de instantie (zelf) biedt: eigenschappen, waardenmethoden, DOM-helpers, evenementen, waarnemers en bestellingen.
State en logica bundelen in een jComponent-plugin
Declareer een plugin met PLUGIN() en koppel hem aan een deel van de pagina met ui-plugin, met ? als zijn eigen pad.
Pagina's in de browser routeren zonder opnieuw te laden
Registreer routes aan de clientkant met ROUTE(), navigeer met REDIRECT(), lees de URL-parameters en de query string uit NAV en ga terug in de geschiedenis.
Delen van een pagina laden met ui-import
Haal een HTML-deel van de server in een element met ui-import of IMPORT() en laat het deel zijn eigen componenten meebrengen.
Code aanroepen met commando's en EXEC
Registreer commando's met component.command() en roep ze aan met CMD(), of roep een plugin-methode aan met EXEC('plugin/method').
Events tussen componenten sturen met ON en EMIT
Ontkoppel delen van de pagina met globale events: EMIT() kondigt iets aan, ON() luistert, OFF() stopt met luisteren.
Gegevens in de browser opslaan met CACHE, PREF en COOKIES
Bewaar waarden tussen bezoeken met CACHE (met verlooptijd), PREF (gebruikersvoorkeuren) en COOKIES.
Instellingen delen met ENV en de syntaxis [key]
Registreer waarden met ENV() en gebruik ze in URL's en componentconfiguratie met de plaatsaanduiding [key].
Gegevens laden van een Total.js-route met AJAX
Roep vanaf de pagina een Total.js-route aan met AJAX() en zet het antwoord in de jComponent-state.
Total.js-API-routes aanroepen met API()
Gebruik API(url, name, data, callback) om de acties van een ROUTE('API ...')-endpoint aan te roepen, inclusief validatiefouten.
Bestanden uploaden met UPLOAD() en voortgang
Stuur een FormData naar een @upload-route van Total.js met UPLOAD() en volg de voortgang.
Kleine helpers: GUID, HASH, parseConfig, format en group
Gebruik de hulpfuncties die jComponent toevoegt: willekeurige id's, hashes, configuratiestrings, tekst- en datumopmaak en groeperen.
Statussnelkoppelingen: INC, TOGGLE, NUL, UPDATE, UNWATCH, WAIT, BLOCKED en CACHEPATH
Kleine functies die een waarde van de status via zijn pad wijzigen of in de gaten houden, wachten tot een waarde bestaat, iets maar één keer per periode uitvoeren en een waarde van de status in de cache bewaren.
Datahelpers: QUERIFY, STRINGIFY, ENCRYPT, FN, CL, TRANSLATE, UNAUTHORIZED en Thelpers
Bouw querystrings, schrijf JSON zonder wat je niet wilt, codeer een waarde met een sleutel, compileer een expressie, laad lijsten met waarden, vertaal teksten, controleer rechten en voeg helpers toe aan de sjablonen.
DOM-helpers: ATTRD, HIDDEN, VISIBLE, WIDTH, STYLE, NODEMOVE, DIFFDOM en APPEARANCE
Lees data-attributen, vraag of een element getoond wordt of op het scherm staat, voeg vervangbare stijlen toe, verplaats elementen binnen hun ouder, werk een lijst bij zonder opnieuw te tekenen en stel de kleuren en de donkere modus van de pagina in.
Componenten en plugins zoeken en aanroepen: FIND, COMPONENTS, SETTER, EXE, TAPI, MIDDLEWARE en ADAPT
Zoek de componenten van de pagina op naam of pad, roep een methode van meerdere componenten tegelijk aan, roep functies bij naam aan, gebruik twee API-adressen met TAPI en PIPE, voer middleware uit vóór een route en vervang de markeringen van een tekst.
Verstuur aangepaste padvlaggen met FLAGS
Voer aangepaste vlaggen uit, observeer hun gebeurtenissen en onderscheid ze van modelwijzigingen en gereserveerde statusvlaggen.