# Ui-bind referencia: minden parancs, opció és attribútum

> Minden parancs ui-kötött, amit mindenki csinál, az opciók, amelyek irányítják, amikor fut, és az attribútumok, amelyek kiválasztják a cél elem.

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

A `<ui-bind>` az a elem, amely **parancsokat** alkalmaz a DOM-ra, amikor az útja értéke megváltozik.Ez az oldal felsorolja, hogy mit tesz minden parancs, milyen opciókat határoz *ha* fut, és milyen attribútumokat választ *melyik elemet* változtat.

A formátum `config="command:expression;command:expression"`. Egy kifejezésben a `value` az útvonal értéke, az `element` (és `el`) pedig a módosított elem. Egy parancsnak lehet szelektora (a `text .name:value` a benne lévő `.name` elemekre alkalmazza), az `attr` pedig először az attribútum nevét veszi (`attr title:value`).

## Az elemet módosító parancsok

| Parancs | Mit csinál |
|---|---|
| `text:expr` | beállítja a szöveget; üres érték esetén az `empty` szövegét mutatja |
| `html:expr` | beállítja a belső HTML-t (az escape-elést magad végezd) |
| `value:expr` | beállítja egy űrlapvezérlő értékét |
| `title:expr`, `href:expr`, `src:expr` | beállítja azt az attribútumot |
| `attr name:expr` | beállít bármilyen attribútumot |
| `.class:expr` | hozzáadja az osztályt, ha a kifejezés igaz, és eltávolítja, ha hamis |
| `show:expr` / `hide:expr` | hozzáadja vagy eltávolítja a `hidden` osztályt |
| `visible:expr` / `invisible:expr` | hozzáadja vagy eltávolítja az `invisible` osztályt (az elem megtartja a helyét) |
| `checked:expr` | bejelöli vagy kijelöletlenné teszi a benne lévő `input` elemet |
| `disabled:expr` / `enabled:expr` | letiltja vagy engedélyezi a benne lévő vezérlőket (`input`, `select`, `textarea`, `button`) és a benne lévő `ui-component` elemeket |
| `required:expr` | beállítja a benne lévő `ui-component` elemek `required` opcióját (a sima `input` elemet nem érinti) |
| `template` | megjeleníti az elem Tangular sablonját (lásd a sablon receptet) |
| `exec:path` / `refresh:path` | meghívja az adott útvonalon lévő függvényt az értékkel, az útvonallal és az elemmel, a binder útvonalának minden `SET` műveleténél |

A `show` és a `hide` fut le először, utána a `visible` és az `invisible`, a `text`, a `html` és a `template` pedig utoljára, hogy az elem láthatósága már ismert legyen, amikor a tartalom íródik. A `text`, a `html` és a `template` csak akkor íródik, amíg az elem látható, hacsak a `forcerender:true` nincs ugyanabban a konfigurációban: akkor akkor is íródnak, ha az elem rejtett.

## Opciók: mikor futnak a parancsok

| Opció | Mit csinál |
|---|---|
| `changes` | kihagyja a frissítést, ha az érték megegyezik az utolsóval |
| `strict` | csak akkor fut, ha maga a binder útvonala változott, nem akkor, ha egy gyermekútvonal (a `user.name` nem futtat `user` binderét) |
| `track:a,b` | csak akkor fut, ha az egyik ilyen útvonal változott (a `user.name` útvonalat követő `user` binder figyelmen kívül hagyja a `user.age` útvonalat); a követett útvonal minden `SET` műveleténél újra fut, azonos értéknél is |
| `once` | egyszer fut, majd a binder eltávolításra kerül |
| `check:path` | meghívja az adott útvonalon lévő függvényt `(value, path, element)` paraméterekkel; a parancsok csak akkor futnak, ha true értéket ad vissza |
| `delay:ms` | ennyi ezredmásodpercet vár, és egyszer rajzol, akkor is, ha az érték közben többször változott (100, ha nincs érték megadva) |
| `empty:text` | az üres érték helyett megjelenített szöveg (`---`, ha nincs szöveg megadva) |
| `format:pattern` | formázza a `text`, `html`, `value`, `attr`, `title`, `href` és `src` értékét a `String.format` segítségével |
| `class:name` | hozzáadja ezt az osztályt az `ui-bind` elemhez egyszer, az első megjelenítés után |
| `assign:path` | az adott útvonalon tárolja a binder példányát |
| `helpers:path` | az adott útvonalon lévő objektum biztosítja a sablon segédeit: a `helpers:hh` és a `hh = { shout: fn }` esetén a sablon használhatja a `{{ value | shout() }}` kifejezést |

## Attribútumok: melyik elem változik

Alapértelmezés szerint a parancsok az `ui-bind` elemet változtatják. Ezek az attribútumok másikat választanak:

- `element="#target"` az oldal bármely eleme (jQuery szelektor)
- `child=".inner"` egy elem az `ui-bind` belsejében
- `parent=".card"` a legközelebbi illeszkedő ős

Az útvonal kezdődhet `!` jellel (`path="!user.nick"`): a binder ilyenkor figyelmen kívül hagyja azokat a pillanatokat, amikor az érték `null` vagy `undefined`. A parancs neve is kezdődhet `!` vagy `~` jellel: az előtagot elfogadja és figyelmen kívül hagyja, a parancs úgy működik, mintha nem lenne.

## A parancsok tulajdonsága

- **Parancsonként egy attribútumot használj: a `title:value` és az `alt:value` két parancsként írd.**

```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>
```