# ui-bind референт: всяка команда, опция и атрибут

> Всички команди на ui-bind с това, което всеки прави, опциите, които контролират, когато той работи, и атрибутите, които избират целевия елемент.

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

`<ui-bind>` е елементът, който прилага **команд** към DOM, когато стойността на пътя му се променя.На тази страница се изброява какво прави всяка команда, опциите, които решават *кога* тя работи и атрибутите, които избират *какъв елемент* тя се променят.

Форматът е `config="command:expression;command:expression"`. В израз `value` е стойността на пътя, а `element` (също `el`) е елементът, който се променя. Командата може да има селектор (`text .name:value` я прилага към елементите `.name` вътре), а `attr` взема първо името на атрибута (`attr title:value`).

## Команди, които променят елемента

| Команда | Какво прави |
|---|---|
| `text:expr` | задава текста; празна стойност показва текста на `empty` |
| `html:expr` | задава вътрешния HTML (екранирайте го сами) |
| `value:expr` | задава стойността на контрол във формуляр |
| `title:expr`, `href:expr`, `src:expr` | задава този атрибут |
| `attr name:expr` | задава всеки атрибут |
| `.class:expr` | добавя класа, когато изразът е истина, и го премахва, когато е лъжа |
| `show:expr` / `hide:expr` | добавя или премахва класа `hidden` |
| `visible:expr` / `invisible:expr` | добавя или премахва класа `invisible` (елементът запазва мястото си) |
| `checked:expr` | отмята или премахва отметката на `input` вътре |
| `disabled:expr` / `enabled:expr` | забранява или разрешава контролите вътре (`input`, `select`, `textarea`, `button`) и елементите `ui-component` вътре |
| `required:expr` | задава опцията `required` на елементите `ui-component` вътре (не докосва обикновен `input`) |
| `template` | рендира Tangular шаблона на елемента (вижте рецептата за шаблони) |
| `exec:path` / `refresh:path` | извиква функцията на този път със стойността, пътя и елемента, при всяко `SET` на пътя на binder |

`show` и `hide` се изпълняват първи, после `visible` и `invisible`, а `text`, `html` и `template` последни, така че видимостта на елемента да е известна, когато се записва съдържанието. `text`, `html` и `template` се записват само докато елементът е видим, освен ако `forcerender:true` не е в същата конфигурация: тогава се записват дори когато елементът е скрит.

## Опции: кога се изпълняват командите

| Опция | Какво прави |
|---|---|
| `changes` | пропуска актуализацията, когато стойността е същата като последната |
| `strict` | изпълнява се само когато самият път на binder се е променил, не когато се е променил дъщерен път (`user.name` не изпълнява binder на `user`) |
| `track:a,b` | изпълнява се само когато един от тези пътища се е променил (binder на `user`, който следи `user.name`, игнорира `user.age`); изпълнява се отново при всяко `SET` на следен път, дори със същата стойност |
| `once` | изпълнява се веднъж и после binder се премахва |
| `check:path` | извиква функцията на този път с `(value, path, element)`; командите се изпълняват само когато върне true |
| `delay:ms` | изчаква толкова милисекунди и рендира веднъж, дори стойността да се е променила няколко пъти междувременно (100, когато не е зададена стойност) |
| `empty:text` | текстът, показван вместо празна стойност (`---`, когато не е зададен текст) |
| `format:pattern` | форматира стойността на `text`, `html`, `value`, `attr`, `title`, `href` и `src` с `String.format` |
| `class:name` | добавя този клас към елемента `ui-bind` веднъж, след първото рендиране |
| `assign:path` | съхранява инстанцията на binder на този път |
| `helpers:path` | обектът на този път предоставя помощниците на шаблона: с `helpers:hh` и `hh = { shout: fn }` шаблонът може да използва `{{ value | shout() }}` |

## Атрибути: кой елемент се променя

По подразбиране командите променят елемента `ui-bind`. Тези атрибути избират друг:

- `element="#target"` всеки елемент на страницата (jQuery селектор)
- `child=".inner"` елемент вътре в `ui-bind`
- `parent=".card"` най-близкият предшественик, който съвпада

Пътят може да започва с `!` (`path="!user.nick"`): тогава binder игнорира моментите, когато стойността е `null` или `undefined`. Името на команда също може да започва с `!` или `~`: префиксът се приема и игнорира, командата работи като без него.

## Атрибути на команди

- **Използвайте един атрибут на команда: пишете `title:value` и `alt:value` като две команди.**

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