# ui-bind-Referenz: jeder Befehl, jede Option und jedes Attribut

> Alle Befehle von ui-bind mit dem, was jeder einzelne tut, den Optionen, die steuern, wann es ausgeführt wird, und den Attributen, die das Zielelement auswählen.

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

`<ui-bind>` ist das Element, das **befehlen** auf den DOM anwendet, wenn der Wert seiner Route sich ändert. Diese Seite enthält, was jede Befehl tut, die Optionen, die entscheiden *wenn* es läuft und die Attribute, die wählen *die Elemente* es ändern.

Das Format ist `config="command:expression;command:expression"`. In einem Ausdruck ist `value` der Wert des Pfads und `element` (auch `el`) das Element, das geändert wird. Ein Befehl kann einen Selektor haben (`text .name:value` wendet ihn auf die Elemente `.name` darin an) und `attr` nimmt zuerst den Attributnamen (`attr title:value`).

## Befehle, die das Element ändern

| Befehl | Was er tut |
|---|---|
| `text:expr` | setzt den Text; ein leerer Wert zeigt den Text von `empty` |
| `html:expr` | setzt das innere HTML (escape es selbst) |
| `value:expr` | setzt den Wert eines Formularelements |
| `title:expr`, `href:expr`, `src:expr` | setzt dieses Attribut |
| `attr name:expr` | setzt ein beliebiges Attribut |
| `.class:expr` | fügt die Klasse hinzu, wenn der Ausdruck wahr ist, und entfernt sie, wenn er falsch ist |
| `show:expr` / `hide:expr` | fügt die Klasse `hidden` hinzu oder entfernt sie |
| `visible:expr` / `invisible:expr` | fügt die Klasse `invisible` hinzu oder entfernt sie (das Element behält seinen Platz) |
| `checked:expr` | setzt oder entfernt den Haken des darin liegenden `input` |
| `disabled:expr` / `enabled:expr` | deaktiviert oder aktiviert die darin liegenden Steuerelemente (`input`, `select`, `textarea`, `button`) und die darin liegenden `ui-component`-Elemente |
| `required:expr` | setzt die Option `required` der darin liegenden `ui-component`-Elemente (ein einfaches `input` bleibt unberührt) |
| `template` | rendert das Tangular-Template des Elements (siehe das Template-Rezept) |
| `exec:path` / `refresh:path` | ruft die Funktion an diesem Pfad mit dem Wert, dem Pfad und dem Element auf, bei jedem `SET` des Pfads des Binders |

`show` und `hide` laufen zuerst, dann `visible` und `invisible`, und `text`, `html` und `template` zuletzt, damit die Sichtbarkeit des Elements schon bekannt ist, wenn der Inhalt geschrieben wird. `text`, `html` und `template` werden nur geschrieben, solange das Element sichtbar ist, außer `forcerender:true` steht in derselben Konfiguration: Dann werden sie auch bei verborgenem Element geschrieben.

## Optionen: wann die Befehle laufen

| Option | Was sie tut |
|---|---|
| `changes` | überspringt die Aktualisierung, wenn der Wert derselbe wie der letzte ist |
| `strict` | läuft nur, wenn sich der Pfad des Binders selbst geändert hat, nicht wenn sich ein Kindpfad geändert hat (`user.name` führt keinen Binder von `user` aus) |
| `track:a,b` | läuft nur, wenn sich einer dieser Pfade geändert hat (ein Binder von `user`, der `user.name` verfolgt, ignoriert `user.age`); läuft bei jedem `SET` eines verfolgten Pfads erneut, auch mit demselben Wert |
| `once` | läuft einmal und dann wird der Binder entfernt |
| `check:path` | ruft die Funktion an diesem Pfad mit `(value, path, element)` auf; die Befehle laufen nur, wenn sie true zurückgibt |
| `delay:ms` | wartet so viele Millisekunden und rendert einmal, auch wenn sich der Wert inzwischen mehrmals geändert hat (100, wenn kein Wert angegeben ist) |
| `empty:text` | der Text, der anstelle eines leeren Wertes angezeigt wird (`---`, wenn kein Text angegeben ist) |
| `format:pattern` | formatiert den Wert von `text`, `html`, `value`, `attr`, `title`, `href` und `src` mit `String.format` |
| `class:name` | fügt diese Klasse dem Element `ui-bind` einmal nach dem ersten Rendern hinzu |
| `assign:path` | speichert die Binder-Instanz an diesem Pfad |
| `helpers:path` | das Objekt an diesem Pfad liefert die Helfer des Templates: mit `helpers:hh` und `hh = { shout: fn }` kann das Template `{{ value | shout() }}` verwenden |

## Attribute: welches Element sich ändert

Standardmäßig ändern die Befehle das Element `ui-bind`. Diese Attribute wählen ein anderes:

- `element="#target"` ein beliebiges Element der Seite (ein jQuery-Selektor)
- `child=".inner"` ein Element innerhalb des `ui-bind`
- `parent=".card"` der nächste passende Vorfahre

Der Pfad kann mit `!` beginnen (`path="!user.nick"`): Der Binder ignoriert dann die Momente, in denen der Wert `null` oder `undefined` ist. Ein Befehlsname kann auch mit `!` oder `~` beginnen: Das Präfix wird akzeptiert und ignoriert, der Befehl funktioniert wie ohne.

## Attribute Befehl

- **Verwenden Sie ein Attribut pro Befehl: Schreiben Sie `title:value` und `alt:value` als zwei Befehle.**

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