# j-DynamicValueList

> Ce composant est un composant très spécial. Il peut conserver des valeurs par exemple Nombre et en même temps il peut restituer un autre texte lisible. Ce composant est optimisé pour une utilisation dynamique, il doit donc être li

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: fr
Content-SHA256: 5e054e1c589983e00e0e7a62131751e64e718c5048f75b4251a5708b1bcc40dc
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

Ce composant est un composant très spécial. Il peut conserver des valeurs par exemple `Number` et en même temps rendre un autre `text` lisible. Ce composant est optimisé pour une utilisation dynamique, il doit donc être lié à un autre composant ou pièce. Ce composant fonctionne avec un tableau.


__Configuration__ :

- Icône `icon {String}` pour l'étiquette, par ex. maison, rouage, etc.
- Étiquette `label {String}` (la valeur par défaut est le contenu HTML)
- Icône `icon2 {String}` dans la case de droite, par ex. maison, rouage, etc. (par défaut : `angle-down`)
- `placeholder {String}` ajoute un texte d'espace réservé
- `disabled {Boolean}` désactive ce composant
- Lien `find {String}` __important__ vers `function(el, next(value))` pour lier une nouvelle valeur
- `read {String}` un lien vers `function(array_of_values, next(array_response))` pour lier un `text` lisible
- `url {String}` tente de lier une valeur via `AJAX()`, l'argument `{0}` dans l'URL est remplacé par la valeur
- Modèle `html {String}` Tangular pour le rendu d'une valeur (par défaut : `{{ name }}`)
- `remap {String}` une fonction de remappage (par défaut : `null`), exemple : `value.length ? value[0] : null`
- `required {Boolean}` active "obligatoire" (par défaut : `false`)
- `bind {String}` un chemin vers la méthode ou la variable où sera liée la valeur chargée (facultatif)
- `dirsource {String}` un lien vers la méthode `function(search_string, next(items_arr))` ou __NEW__ : peut contenir l'URL de recherche sous la forme `GET /api/partners/?q={0}`
- `dircustom {String/Boolean}` peut contenir un chemin vers function(val, next(new_val)) ou peut être booléen. Cette option peut permettre l'ajout d'une valeur personnalisée (valeur non définie dans la source de données)
- `dirrender {String}` un chemin vers `function(item, text)` (doit renvoyer du HTML pour j-Directory), cette fonction peut affecter la liste des éléments dans j-Directory
- `dirminwidth {Number}` une largeur minimale pour j-Directory, (par défaut : `200`)
- `dirmaxwidth {Number}` une largeur maximale pour j-Directory
- `dirplaceholder {String}` un espace réservé pour j-Directory
- `dirempty {String}` ajoute un champ vide pour j-Directory
- `dirkey {String}` un nom de clé pour la lecture du texte dans le répertoire (par défaut : `name`)
- `dirvalue {String}` un nom de clé pour la lecture de la valeur dans le répertoire (par défaut : `id`)
- `key {String}` un nom de clé primaire (par défaut : une valeur de `dirvalue`)
- __NEW__ `tapi {Boolean}` permet d'appeler `TAPI()` au lieu de `AJAX()` (par défaut : false)

### Utilisation d'AJAX

Si le `value` est modifié, le composant effectue automatiquement l'appel `AJAX`. Le serveur doit répondre avec `Array`.

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

### Utilisation en ligne

Si le `value` doit être modifié, le composant exécute `config.exec` pour obtenir un texte lisible d'une valeur.

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

Utilisez-le avec `<ui-component name="dynamicvaluelist">`. Lorsque le composant n'est pas encore chargé, jComponent le télécharge lors de la première utilisation depuis l'adresse dans `DEF.fallback` (le CDN Componentator par défaut). Auteur : Peter Širka. Source : le référentiel de composants Componentator, licence MIT.

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