# j-DynamicValueList

> Diese Komponente ist eine ganz besondere Komponente. Es kann Werte wie z. B. Zahlen speichern und gleichzeitig einen anderen lesbaren Text wiedergeben. Diese Komponente ist für die dynamische Nutzung optimiert und muss daher li sein

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

Diese Komponente ist eine ganz besondere Komponente. Es kann beispielsweise Werte `Number` behalten und gleichzeitig einen anderen lesbaren `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. Diese Komponente arbeitet mit Array.


__Konfiguration__:

- `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(array_of_values, next(array_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_string, 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`)
- `key {String}` ein Primärschlüsselname (Standard: ein Wert aus `dirvalue`)
- __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. Der Server muss mit `Array` antworten.

```html
<ui-component name="dynamicvaluelist" path="path.to.property" config="url:/users/?id={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="dynamicvaluelist" path="path.to.property" config="read:my_function"></ui-component>

<script>
	function my_function(arr, next) {
		// the component automatically pairs "response" with "arr"
		next([{ id: 1, name: 'This text will be displayed as a value '}]);
	}
</script>
```

Verwenden Sie es mit `<ui-component name="dynamicvaluelist">`. 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
<ui-component name="directory"></ui-component>

<div class="m" style="width:300px">
	<ui-component name="dynamicvaluelist" path="common.users" config="read:getusers;dirsource:findusers;placeholder:Add user">Users</ui-component>
</div>

<script>
	var names = [];
	names.push({ id: '1', name: 'Denis' });
	names.push({ id: '2', name: 'Peter' });
	names.push({ id: '3', name: 'Tomáš' });
	names.push({ id: '4', name: 'Lucka' });
	names.push({ id: '5', name: 'Lenka' });

	function getusers(value, next) {
		var temp = [];
		for (var i = 0; i < value.length; i++) {
			var user = names.findItem('id', value[i]);
			user && temp.push(user);
		}
		next(temp);
	}

	function findusers(search, next) {
		var items = names.slice(0);
		next(items);
	}

</script>
```