# Ui-bind: fiecare comandă, opțiune și atribut

> Toate comenzi ale ui-bind cu ceea ce face fiecare, opțiunile care controlează atunci când rulează și atributele care aleg elementul țintă.

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

`<ui-bind>` este elementul care aplică **comandele** DOM-ului atunci când se schimbă valoarea căii sale.Această pagină prezintă ceea ce face fiecare comandă, opțiunile care decid *când* funcționează și atributele care alege *care element* se schimbã.

Formatul este `config="command:expression;command:expression"`. Într-o expresie `value` este valoarea căii, iar `element` (și `el`) este elementul care se schimbă. O comandă poate avea un selector (`text .name:value` îl aplică elementelor `.name` dinăuntru), iar `attr` ia mai întâi numele atributului (`attr title:value`).

## Comenzi care schimbă elementul

| Comandă | Ce face |
|---|---|
| `text:expr` | setează textul; o valoare goală afișează textul `empty` |
| `html:expr` | setează HTML-ul interior (fă singur escape-ul) |
| `value:expr` | setează valoarea unui control de formular |
| `title:expr`, `href:expr`, `src:expr` | setează acel atribut |
| `attr name:expr` | setează orice atribut |
| `.class:expr` | adaugă clasa când expresia este adevărată și o elimină când este falsă |
| `show:expr` / `hide:expr` | adaugă sau elimină clasa `hidden` |
| `visible:expr` / `invisible:expr` | adaugă sau elimină clasa `invisible` (elementul își păstrează locul) |
| `checked:expr` | bifează sau debifează `input`-ul dinăuntru |
| `disabled:expr` / `enabled:expr` | dezactivează sau activează controalele dinăuntru (`input`, `select`, `textarea`, `button`) și elementele `ui-component` dinăuntru |
| `required:expr` | setează opțiunea `required` a elementelor `ui-component` dinăuntru (nu atinge un `input` simplu) |
| `template` | redă șablonul Tangular al elementului (vezi rețeta șabloanelor) |
| `exec:path` / `refresh:path` | apelează funcția de la acea cale cu valoarea, calea și elementul, la fiecare `SET` al căii binder-ului |

`show` și `hide` rulează primele, apoi `visible` și `invisible`, iar `text`, `html` și `template` ultimele, astfel încât vizibilitatea elementului să fie deja cunoscută când se scrie conținutul. `text`, `html` și `template` se scriu doar cât timp elementul este vizibil, cu excepția cazului în care `forcerender:true` este în aceeași configurație: atunci se scriu chiar și când elementul este ascuns.

## Opțiuni: când rulează comenzile

| Opțiune | Ce face |
|---|---|
| `changes` | sare peste actualizare când valoarea este aceeași cu ultima |
| `strict` | rulează doar când s-a schimbat chiar calea binder-ului, nu când s-a schimbat o cale copil (`user.name` nu rulează un binder de `user`) |
| `track:a,b` | rulează doar când s-a schimbat una dintre acele căi (un binder de `user` care urmărește `user.name` ignoră `user.age`); rulează din nou la fiecare `SET` al unei căi urmărite, chiar și cu aceeași valoare |
| `once` | rulează o dată și apoi binder-ul este eliminat |
| `check:path` | apelează funcția de la acea cale cu `(value, path, element)`; comenzile rulează doar când returnează true |
| `delay:ms` | așteaptă atâtea milisecunde și redă o dată, chiar dacă valoarea s-a schimbat de mai multe ori între timp (100 când nu se dă nicio valoare) |
| `empty:text` | textul afișat în locul unei valori goale (`---` când nu se dă niciun text) |
| `format:pattern` | formatează valoarea lui `text`, `html`, `value`, `attr`, `title`, `href` și `src` cu `String.format` |
| `class:name` | adaugă acea clasă elementului `ui-bind` o dată, după prima redare |
| `assign:path` | stochează instanța binder-ului la acea cale |
| `helpers:path` | obiectul de la acea cale furnizează ajutoarele șablonului: cu `helpers:hh` și `hh = { shout: fn }`, șablonul poate folosi `{{ value | shout() }}` |

## Atribute: ce element se schimbă

Implicit comenzile schimbă elementul `ui-bind`. Aceste atribute aleg altul:

- `element="#target"` orice element al paginii (un selector jQuery)
- `child=".inner"` un element din interiorul `ui-bind`
- `parent=".card"` cel mai apropiat strămoș care se potrivește

Calea poate începe cu `!` (`path="!user.nick"`): binder-ul ignoră atunci momentele în care valoarea este `null` sau `undefined`. Numele unei comenzi poate începe și cu `!` sau `~`: prefixul este acceptat și ignorat, comanda funcționează ca fără el.

## Atribut comandă

- **Folosește un atribut pe comandă: scrie `title:value` și `alt:value` ca două comenzi.**

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