# ui-bind odkaz: každý príkaz, možnosť a atribút

> Všetky príkazy ui sa spájajú s tým, čo každý z nich robí, s možnosťami, ktoré riadia, kedy sa spúšťa, a s atribútmi, ktoré vyberajú cieľový prvok.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: sk
Content-SHA256: aef428ca94dbdf84a90be4565dfedea76c5230d5b70be0852cf8fa7cafe46b41
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: jcomponent20@3fedd009a277f50fddc608b97afbec553b67c51b
Review: not-recorded

`<ui-bind>` je prvok, ktorý sa vzťahuje na **komandy** na DOM, keď sa mení hodnota jeho trasy. Táto stránka uvádza, čo každá príkaz robí, možnosti, ktoré rozhodujú *kedy* to beží a atribúty, ktoré vyberajú *ktorý prvok* to mení.

Formát je `config="command:expression;command:expression"`. Vo výraze je `value` hodnota cesty a `element` (aj `el`) je element, ktorý sa mení. Príkaz môže mať selektor (`text .name:value` ho aplikuje na elementy `.name` vnútri) a `attr` berie najprv názov atribútu (`attr title:value`).

## Príkazy, ktoré menia element

| Príkaz | Čo robí |
|---|---|
| `text:expr` | nastaví text; prázdna hodnota zobrazí text `empty` |
| `html:expr` | nastaví vnútorné HTML (escapujte si ho sami) |
| `value:expr` | nastaví hodnotu formulárového prvku |
| `title:expr`, `href:expr`, `src:expr` | nastaví ten atribút |
| `attr name:expr` | nastaví ľubovoľný atribút |
| `.class:expr` | pridá triedu, keď je výraz pravdivý, a odstráni ju, keď je nepravdivý |
| `show:expr` / `hide:expr` | pridá alebo odstráni triedu `hidden` |
| `visible:expr` / `invisible:expr` | pridá alebo odstráni triedu `invisible` (element si ponechá miesto) |
| `checked:expr` | označí alebo odznačí `input` vnútri |
| `disabled:expr` / `enabled:expr` | zakáže alebo povolí prvky vnútri (`input`, `select`, `textarea`, `button`) a elementy `ui-component` vnútri |
| `required:expr` | nastaví voľbu `required` elementov `ui-component` vnútri (obyčajného `input` sa nedotkne) |
| `template` | vykreslí šablónu Tangular elementu (pozri recept o šablónach) |
| `exec:path` / `refresh:path` | zavolá funkciu na tej ceste s hodnotou, cestou a elementom pri každom `SET` cesty bindera |

`show` a `hide` sa spustia ako prvé, potom `visible` a `invisible` a `text`, `html` a `template` ako posledné, aby bola viditeľnosť elementu známa už pri zápise obsahu. `text`, `html` a `template` sa zapisujú, iba kým je element viditeľný, pokiaľ nie je v tej istej konfigurácii `forcerender:true`: vtedy sa zapíšu aj pri skrytom elemente.

## Voľby: kedy sa príkazy spustia

| Voľba | Čo robí |
|---|---|
| `changes` | preskočí aktualizáciu, keď je hodnota rovnaká ako posledná |
| `strict` | spustí sa iba vtedy, keď sa zmenila samotná cesta bindera, nie keď sa zmenila podriadená cesta (`user.name` nespustí binder `user`) |
| `track:a,b` | spustí sa iba vtedy, keď sa zmenila jedna z týchto ciest (binder `user`, ktorý sleduje `user.name`, ignoruje `user.age`); spustí sa znova pri každom `SET` sledovanej cesty, aj s rovnakou hodnotou |
| `once` | spustí sa raz a potom sa binder odstráni |
| `check:path` | zavolá funkciu na tej ceste s `(value, path, element)`; príkazy sa spustia, iba keď vráti true |
| `delay:ms` | počká toľko milisekúnd a vykreslí raz, aj keď sa hodnota medzitým zmenila viackrát (100, keď nie je zadaná hodnota) |
| `empty:text` | text zobrazený namiesto prázdnej hodnoty (`---`, keď nie je zadaný text) |
| `format:pattern` | naformátuje hodnotu `text`, `html`, `value`, `attr`, `title`, `href` a `src` cez `String.format` |
| `class:name` | pridá túto triedu elementu `ui-bind` raz, po prvom vykreslení |
| `assign:path` | uloží inštanciu bindera na tú cestu |
| `helpers:path` | objekt na tej ceste poskytuje pomocníkov šablóny: s `helpers:hh` a `hh = { shout: fn }` môže šablóna použiť `{{ value | shout() }}` |

## Atribúty: ktorý element sa mení

Predvolene príkazy menia element `ui-bind`. Tieto atribúty vyberú iný:

- `element="#target"` ľubovoľný element stránky (selektor jQuery)
- `child=".inner"` element vnútri `ui-bind`
- `parent=".card"` najbližší predok, ktorý vyhovuje

Cesta môže začínať `!` (`path="!user.nick"`): binder potom ignoruje chvíle, keď je hodnota `null` alebo `undefined`. Názov príkazu môže tiež začínať `!` alebo `~`: predpona sa akceptuje a ignoruje, príkaz funguje ako bez nej.

## Príslušné príkazy

- **Používajte jeden atribút na príkaz: `title:value` a `alt:value` napíšte ako dva príkazy.**

```html public/index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>jComponent</title>
	<link rel="stylesheet" href="//cdn.componentator.com/spa.min@20.css" />
	<script src="//cdn.componentator.com/spa.min@20.js"></script>
</head>
<body>
	<ui-bind path="user.age" config="visible:value > 17" id="visible"><span>adult</span></ui-bind>
	<ui-bind path="user.age" config="invisible:value > 17" id="invisible"><span>minor</span></ui-bind>
	<ui-bind path="user.name" config="text:value;class:marked" id="classonce"></ui-bind>
	<ui-bind path="user.name" config="text:(window.counter_changes = (window.counter_changes || 0) + 1) && value;changes" id="changes"></ui-bind>
	<ui-bind path="user" config="text:(window.counter_strict = (window.counter_strict || 0) + 1);strict" id="strict"></ui-bind>
	<ui-bind path="user" config="text:value.name;track:user.name" id="track"></ui-bind>
	<ui-bind path="user.name" config="text:value;once" id="once"></ui-bind>
	<ui-bind path="user.name" config="text:value;check:isready" id="check"></ui-bind>
	<ui-bind path="user.name" config="exec:onname" id="exec"></ui-bind>
	<ui-bind path="user.name" config="text:value;assign:binders.main" id="assign"></ui-bind>
	<ui-bind path="!user.nick" config="text:value" id="notnull"></ui-bind>
	<ui-bind path="user.name" config="text:value" element="#target" id="element"></ui-bind>
	<div id="target"></div>
	<ui-bind path="user.name" config="text:value" child=".inner" id="child"><b class="inner"></b></ui-bind>
	<ui-bind path="user.name" config="text .a:value;text .b:value.toUpperCase()" id="selector"><i class="a"></i><i class="b"></i></ui-bind>
	<ui-bind path="user.name" config="show:false;text:value;forcerender:true" id="force"></ui-bind>
	<ui-bind path="user.name" config="show:false;text:value" id="noforce"></ui-bind>
	<ui-bind path="user.admin" config="required:value;disabled:!value" id="flags"><input type="text" /></ui-bind>
	<ui-bind path="user.admin" config="checked:value" id="checked"><input type="checkbox" /></ui-bind>

	<ui-bind path="user.name" config="title+alt:value" id="clone"></ui-bind>
	<ui-bind path="user" config="text:(window.counter_track = (window.counter_track || 0) + 1);track:user.name" id="track2"></ui-bind>
	<ui-bind path="user.name" config="template;helpers:hh" id="helpers"><script type="text/html"><b>{{ value | shout() }}</b></script></ui-bind>
	<ui-bind path="user.none" config="text:value;empty" id="emptydef"></ui-bind>
	<ui-bind path="user.name" config="focus"><input type="text" id="f1" /></ui-bind>
	<ui-bind path="user.name" config="!text:value" id="bang"></ui-bind>
	<ui-bind path="user.name" config="~text:value" id="tilde"></ui-bind>
	<ui-bind path="user.name" config="text:el.attr('id') + '/' + element.attr('id')" id="elvar"></ui-bind>
	<div class="card"><ui-bind path="user.name" config="attr data-n:value" parent=".card" id="parentbind"></ui-bind></div>

	<script>
		window.hh = { shout: s => String(s).toUpperCase() };
		window.isready = function(value, path, element) {
			return value !== 'blocked';
		};
		window.exec_log = [];
		window.onname = function() {
			window.exec_log.push(Array.prototype.slice.call(arguments).map(a => typeof a === 'object' ? (a && a.nodeType ? 'element' : a && a.path ? 'path' : 'object') : String(a)).join('|'));
		};
		SET('user', { name: 'Ann', age: 30, admin: false });
	</script>

</body>
</html>
```