# ui-bind referens: varje kommandot, alternativ och attribut

> Alla kommandon av ui-bind med vad varje gör, de alternativ som kontrollerar när det körs, och attribut som väljer målvakten.

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

`<ui-bind>` är det element som tillämpar **kommandon** på DOM när värdet av sin väg ändras.Detta sida listar vad varje kommando gör, de alternativ som bestämmer *när* det körs och attribut som väljer *vilket element* det ändrar.

Formatet är `config="command:expression;command:expression"`. I ett uttryck är `value` sökvägens värde och `element` (även `el`) elementet som ändras. Ett kommando kan ha en selektor (`text .name:value` tillämpar det på elementen `.name` inuti) och `attr` tar attributnamnet först (`attr title:value`).

## Kommandon som ändrar elementet

| Kommando | Vad det gör |
|---|---|
| `text:expr` | sätter texten; ett tomt värde visar texten `empty` |
| `html:expr` | sätter inre HTML (gör escape själv) |
| `value:expr` | sätter värdet på en formulärkontroll |
| `title:expr`, `href:expr`, `src:expr` | sätter det attributet |
| `attr name:expr` | sätter vilket attribut som helst |
| `.class:expr` | lägger till klassen när uttrycket är sant och tar bort den när det är falskt |
| `show:expr` / `hide:expr` | lägger till eller tar bort klassen `hidden` |
| `visible:expr` / `invisible:expr` | lägger till eller tar bort klassen `invisible` (elementet behåller sitt utrymme) |
| `checked:expr` | bockar i eller ur `input` inuti |
| `disabled:expr` / `enabled:expr` | inaktiverar eller aktiverar kontrollerna inuti (`input`, `select`, `textarea`, `button`) och elementen `ui-component` inuti |
| `required:expr` | sätter alternativet `required` för elementen `ui-component` inuti (rör inte en vanlig `input`) |
| `template` | renderar elementets Tangular-mall (se mallreceptet) |
| `exec:path` / `refresh:path` | anropar funktionen på den sökvägen med värdet, sökvägen och elementet, vid varje `SET` av bindarens sökväg |

`show` och `hide` körs först, sedan `visible` och `invisible`, och `text`, `html` och `template` körs sist, så att elementets synlighet redan är känd när innehållet skrivs. `text`, `html` och `template` skrivs bara medan elementet är synligt, om inte `forcerender:true` finns i samma konfiguration: då skrivs de även när elementet är dolt.

## Alternativ: när kommandona körs

| Alternativ | Vad det gör |
|---|---|
| `changes` | hoppar över uppdateringen när värdet är detsamma som det senaste |
| `strict` | körs bara när bindarens egen sökväg ändrats, inte när en barnsökväg ändrats (`user.name` kör inte en bindare för `user`) |
| `track:a,b` | körs bara när en av de sökvägarna ändrats (en bindare för `user` som spårar `user.name` ignorerar `user.age`); den körs igen för varje `SET` av en spårad sökväg, även med samma värde |
| `once` | körs en gång och sedan tas bindaren bort |
| `check:path` | anropar funktionen på den sökvägen med `(value, path, element)`; kommandona körs bara när den returnerar true |
| `delay:ms` | väntar så många millisekunder och renderar en gång, även om värdet ändrats flera gånger under tiden (100 när inget värde anges) |
| `empty:text` | texten som visas i stället för ett tomt värde (`---` när ingen text anges) |
| `format:pattern` | formaterar värdet för `text`, `html`, `value`, `attr`, `title`, `href` och `src` med `String.format` |
| `class:name` | lägger till den klassen på elementet `ui-bind` en gång, efter den första renderingen |
| `assign:path` | lagrar bindarinstansen på den sökvägen |
| `helpers:path` | objektet på den sökvägen tillhandahåller mallens hjälpare: med `helpers:hh` och `hh = { shout: fn }` kan mallen använda `{{ value | shout() }}` |

## Attribut: vilket element som ändras

Som standard ändrar kommandona elementet `ui-bind`. De här attributen väljer ett annat:

- `element="#target"` vilket element som helst på sidan (en jQuery-selektor)
- `child=".inner"` ett element inuti `ui-bind`
- `parent=".card"` den närmaste förfadern som matchar

Sökvägen kan börja med `!` (`path="!user.nick"`): bindaren ignorerar då de ögonblick då värdet är `null` eller `undefined`. Ett kommandonamn kan också börja med `!` eller `~`: prefixet accepteras och ignoreras, kommandot fungerar som utan det.

## Attribut kommandon

- **Använd ett attribut per kommando: skriv `title:value` och `alt:value` som två kommandon.**

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