# ui-bind referentie: elke opdracht, optie en attribute

> Alle bestellingen van ui-bind met wat elk doet, de opties die controleren wanneer het loopt, en de attributen die het doelelement kiezen.

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

`<ui-bind>` is het element dat **bevelen** aan de DOM toevoegt wanneer de waarde van de route verandert. deze pagina geeft een lijst met wat elk bevel doet, de opties die beslissen *als* het loopt en de attributen die kiezen *welk element* het verandert

Het formaat is `config="command:expression;command:expression"`. In een expressie is `value` de waarde van het pad en `element` (ook `el`) het element dat wordt gewijzigd. Een commando kan een selector hebben (`text .name:value` past het toe op de elementen `.name` erin) en `attr` neemt eerst de attribuutnaam (`attr title:value`).

## Commando's die het element wijzigen

| Commando | Wat het doet |
|---|---|
| `text:expr` | zet de tekst; een lege waarde toont de tekst van `empty` |
| `html:expr` | zet de inner HTML (escape die zelf) |
| `value:expr` | zet de waarde van een formulierbesturingselement |
| `title:expr`, `href:expr`, `src:expr` | zet dat attribuut |
| `attr name:expr` | zet elk attribuut |
| `.class:expr` | voegt de klasse toe wanneer de expressie waar is en verwijdert haar wanneer onwaar |
| `show:expr` / `hide:expr` | voegt de klasse `hidden` toe of verwijdert haar |
| `visible:expr` / `invisible:expr` | voegt de klasse `invisible` toe of verwijdert haar (het element behoudt zijn ruimte) |
| `checked:expr` | vinkt de `input` erin aan of uit |
| `disabled:expr` / `enabled:expr` | schakelt de besturingselementen erin (`input`, `select`, `textarea`, `button`) en de `ui-component`-elementen erin uit of in |
| `required:expr` | zet de optie `required` van de `ui-component`-elementen erin (een gewone `input` blijft onaangeroerd) |
| `template` | rendert het Tangular-sjabloon van het element (zie het sjabloonrecept) |
| `exec:path` / `refresh:path` | roept de functie op dat pad aan met de waarde, het pad en het element, bij elke `SET` van het pad van de binder |

`show` en `hide` draaien eerst, dan `visible` en `invisible`, en `text`, `html` en `template` het laatst, zodat de zichtbaarheid van het element al bekend is wanneer de inhoud wordt geschreven. `text`, `html` en `template` worden alleen geschreven zolang het element zichtbaar is, tenzij `forcerender:true` in dezelfde configuratie staat: dan worden ze ook geschreven als het element verborgen is.

## Opties: wanneer de commando's draaien

| Optie | Wat het doet |
|---|---|
| `changes` | slaat de update over wanneer de waarde gelijk is aan de vorige |
| `strict` | draait alleen wanneer het pad van de binder zelf is veranderd, niet wanneer een kindpad is veranderd (`user.name` voert geen binder van `user` uit) |
| `track:a,b` | draait alleen wanneer een van die paden is veranderd (een binder van `user` die `user.name` volgt, negeert `user.age`); draait opnieuw bij elke `SET` van een gevolgd pad, ook met dezelfde waarde |
| `once` | draait eenmaal en daarna wordt de binder verwijderd |
| `check:path` | roept de functie op dat pad aan met `(value, path, element)`; de commando's draaien alleen wanneer die true teruggeeft |
| `delay:ms` | wacht zoveel milliseconden en rendert eenmaal, ook als de waarde ondertussen meermaals is veranderd (100 wanneer geen waarde is opgegeven) |
| `empty:text` | de tekst die wordt getoond in plaats van een lege waarde (`---` wanneer geen tekst is opgegeven) |
| `format:pattern` | formatteert de waarde van `text`, `html`, `value`, `attr`, `title`, `href` en `src` met `String.format` |
| `class:name` | voegt die klasse eenmaal toe aan het element `ui-bind`, na de eerste render |
| `assign:path` | slaat de binderinstantie op dat pad op |
| `helpers:path` | het object op dat pad levert de helpers van het sjabloon: met `helpers:hh` en `hh = { shout: fn }` kan het sjabloon `{{ value | shout() }}` gebruiken |

## Attributen: welk element verandert

Standaard wijzigen de commando's het element `ui-bind`. Deze attributen kiezen een ander:

- `element="#target"` elk element van de pagina (een jQuery-selector)
- `child=".inner"` een element binnen het `ui-bind`
- `parent=".card"` de dichtstbijzijnde voorouder die overeenkomt

Het pad kan beginnen met `!` (`path="!user.nick"`): de binder negeert dan de momenten waarop de waarde `null` of `undefined` is. Een commandonaam kan ook beginnen met `!` of `~`: het voorvoegsel wordt geaccepteerd en genegeerd, het commando werkt als zonder.

## Attribute Commands

- **Gebruik één attribuut per commando: schrijf `title:value` en `alt:value` als twee commando’s.**

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