en
Español
Slovenčina
Deutsch
Français
Italiano
Português
Polski
Čeština
Nederlands
Română
Magyar
Svenska
Ελληνικά
БългарскиjComponent 20 (frontend)
Components, plugins, data binding and everything that runs in the browser.
Get started with jComponent 20
Load the jComponent bundle, set a value in the global state and show it with a ui-bind element.
Read, change and watch the state
Use SET, GET, UPD, PUSH and WATCH to work with the global state and react when a path changes.
Write a custom jComponent
Register a reusable component with COMPONENT(), render it in make(), react to state changes in setter() and write back with set().
Configure a component and reconfigure it later
Give a component default options, override them in the config attribute, react in configure() and change them at runtime with reconfigure().
Component lifecycle: make, setter and destroy
Know when jComponent creates, updates and removes a component, and clean up timers and listeners in destroy().
Validate input with a component's validate()
Implement validate() in a component, read the invalid, touched and modified states, and find invalid fields with ERRORS().
Path prefixes: common, code lists, temporary state and plugin paths
The first character of a jComponent path chooses where the value lives: * the common state, # the code lists, % the temporary state, ? the plugin state and plugin|path a property of a plugin object.
Load a library before a component starts
List scripts and styles as the dependencies of a component so jComponent downloads them once and starts the component afterwards.
Extend components and plugins with EXTENSION
Add behavior to an existing component from outside, without editing its source, with EXTENSION().
Show, hide and style elements with ui-bind
Use ui-bind commands to toggle visibility, classes and HTML from the state, without writing DOM code.
Render lists with a ui-bind template
Put a Tangular template inside ui-bind with the template command to render arrays and objects whenever the data changes.
More ui-bind commands: attributes, values, state and formatting
Set HTML, attributes, form values, disabled state and a text format from the state with ui-bind commands.
ui-bind reference: every command, option and attribute
All the commands of ui-bind with what each one does, the options that control when it runs, and the attributes that choose the target element.
Component instance reference: properties and methods of self
The declaration of a jComponent 20 component and what its instance (self) offers: properties, value methods, DOM helpers, events, watchers and commands.
Group state and logic in a jComponent plugin
Declare a plugin with PLUGIN() and attach it to a part of the page with ui-plugin, using ? as its own path.
Route pages in the browser without reloading
Register client-side routes with ROUTE(), navigate with REDIRECT(), read the URL parameters and the query string from NAV, and go back in the history.
Load parts of a page with ui-import
Fetch an HTML part from the server into an element with ui-import or IMPORT(), and let the part carry its own components.
Call code with commands and EXEC
Register commands with component.command() and call them with CMD(), or call a plugin method with EXEC('plugin/method').
Send events between components with ON and EMIT
Decouple parts of the page with global events: EMIT() announces something, ON() listens, OFF() stops listening.
Store data in the browser with CACHE, PREF and COOKIES
Keep values between visits with CACHE (expiring), PREF (user preferences) and COOKIES.
Share settings with ENV and the [key] syntax
Register values with ENV() and use them in URLs and component configuration with the [key] placeholder.
Load data from a Total.js route with AJAX
Call a Total.js route from the page with AJAX() and put the response into the jComponent state.
Call Total.js API routes with API()
Use API(url, name, data, callback) to call the actions of a ROUTE('API ...') endpoint, validation errors included.
Upload files with UPLOAD() and progress
Send a FormData to a Total.js @upload route with UPLOAD() and follow the progress.
Small helpers: GUID, HASH, parseConfig, format and group
Use the helper functions that jComponent adds: random ids, hashes, config strings, string and date formatting and grouping.
State shortcuts: INC, TOGGLE, NUL, UPDATE, UNWATCH, WAIT, BLOCKED and CACHEPATH
Small functions that change or watch a value of the state by its path, wait until a value exists, run something only once in a period and keep a value of the state in the cache.
Data helpers: QUERIFY, STRINGIFY, ENCRYPT, FN, CL, TRANSLATE, UNAUTHORIZED and Thelpers
Build query strings, write JSON without what you do not want, encode a value with a key, compile an expression, load lists of values, translate texts, check permissions and add helpers to the templates.
DOM helpers: ATTRD, HIDDEN, VISIBLE, WIDTH, STYLE, NODEMOVE, DIFFDOM and APPEARANCE
Read data attributes, ask if an element is shown or on the screen, add styles that you can replace, move elements in their parent, update a list without redrawing it, and set the colors and the dark mode of the page.
Find and call components and plugins: FIND, COMPONENTS, SETTER, EXE, TAPI, MIDDLEWARE and ADAPT
Look for the components of the page by name or path, call a method of several components at once, call functions by name, use two API addresses with TAPI and PIPE, run middleware before a route and replace the markers of a text.
Dispatch custom path flags with FLAGS
Execute custom flags, observe their events and distinguish them from model changes and reserved state flags.