# j-DynamicValue

> Diese Komponente ist eine ganz besondere Komponente. Es kann einen Wert, beispielsweise eine Zahl, behalten und gleichzeitig einen anderen lesbaren Text wiedergeben. Diese Komponente ist für die dynamische Nutzung optimiert und muss daher l sein

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: de
Content-SHA256: 25618d79b3912008808cb3579eaaf6ed30bc2056fd85fd50b410886285398bff
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

Diese Komponente ist eine ganz besondere Komponente. Es kann beispielsweise einen Wert `Number` behalten und gleichzeitig einen anderen lesbaren Wert `text` wiedergeben. Diese Komponente ist für die dynamische Nutzung optimiert und muss daher mit einer anderen Komponente oder einem anderen Teil verknüpft werden.


- `icon {String}`-Symbol für Beschriftung, z. B. Zuhause, Zahnrad usw.
- Label `label {String}` (Standard ist HTML-Inhalt)
- `icon2 {String}`-Symbol im rechten Feld, z. B. Zuhause, Zahnrad usw. (Standard: `angle-down`)
- `placeholder {String}` fügt einen Platzhaltertext hinzu
- `disabled {Boolean}` deaktiviert diese Komponente
- `find {String}` __important__ Link zu `function(el, next(value))` zum Binden eines neuen Werts
- `read {String}` ein Link zu `function(value, next(response))` zum Binden eines lesbaren `text`
- `url {String}` versucht einen Wert über `AJAX()` zu binden, Argument `{0}` in der URL wird durch den Wert ersetzt
- `html {String}` Tangular-Vorlage zum Rendern eines Werts (Standard: `{{ name }}`)
- `remap {String}` eine Remap-Funktion (Standard: `null`), Beispiel: `value.length ? value[0] : null`
- `required {Boolean}` aktiviert „erforderlich“ (Standard: `false`)
- `bind {String}` ein Pfad zur Methode oder Variablen, an die der geladene Wert gebunden wird (optional)
- `dirsource {String}` ein Link zur Methode `function(search, next(items_arr))` oder __NEW__: kann URL für die Suche im Formular `GET /api/partners/?q={0}` enthalten
- `dircustom {String/Boolean}` kann einen Pfad zu function(val, next(new_val)) enthalten oder boolesch sein. Mit dieser Option kann das Hinzufügen eines benutzerdefinierten Werts aktiviert werden (Wert nicht in der Datenquelle definiert).
- `dirrender {String}` ein Pfad zu `function(item, text)` (muss HTML für j-Directory zurückgeben), diese Funktion kann sich auf die Liste der Elemente in j-Directory auswirken
- `dirminwidth {Number}` eine Mindestbreite für j-Directory (Standard: `200`)
- `dirmaxwidth {Number}` eine maximale Breite für j-Directory
- `dirplaceholder {String}` ein Platzhalter für j-Directory
- `dirempty {String}` fügt ein leeres Feld für j-Directory hinzu
- `dirkey {String}` ein Schlüsselname zum Lesen von Text in dirsource (Standard: `name`)
- `dirvalue {String}` ein Schlüsselname zum Lesen des Werts in dirsource (Standard: `id`)
- `onresponse {String}` ein Pfad zur Eigenschaft oder `function(response)`, ausgeführt, wenn die Antwort verarbeitet wird (Standard: `undefined`)
- __NEW__ `tapi {Boolean}` ermöglicht den Aufruf von `TAPI()` anstelle von `AJAX()` (Standard: false)

### AJAX-Nutzung

Wenn `value` geändert wird, führt die Komponente den `AJAX`-Aufruf automatisch aus.

```html
<ui-component name="dynamicvalue" path="path.to.property" config="url:/users/{0}/;dirsource:GET /users/?search={0}"></ui-component>
```

### Inline-Nutzung

Wenn `value` geändert wird, führt die Komponente `config.exec` aus, um einen lesbaren Text eines Werts zu erhalten.

```html
<ui-component name="dynamicvalue" path="path.to.property" config="exec:my_function"></ui-component>

<script>
	function my_function(value, next) {
		next({ name: 'This text will be displayed as a value '});
	}
</script>
```

__Gut zu wissen__:

- `component.response` enthält eine Rohantwort aus dem Ergebnis

Verwenden Sie es mit `<ui-component name="dynamicvalue">`. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in `DEF.fallback` herunter (standardmäßig das CDN Componentator). Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

```html example.html
<div style="width:300px">
	<ui-component name="dynamicvalue" path="userid" config="exec:getuser;click:finduser;placeholder:Choose a user">User</ui-component>
</div>

<script>
	var userid = 1;

	function getuser(value, next) {
		// Here you can read a readable text
		// Value is binded according to the "config.html" Tangular template
		next({ name: 'Peter' });
	}

	function finduser(element, next, current_value) {
		// "next" must received a new value which will be binded from e.g. j-Suggestion or some j-Form
		// a value will be automatically binded according to the component "path"
		next(1);
	}

</script>
```