# j-DynamicValueList

> Deze component is een zeer speciale component. Het kan waarden houden, bijvoorbeeld getal en op hetzelfde moment kan het een andere leesbare tekst maken. Dit component wordt geoptimaliseerd voor dynamische gebruik, dus het moet

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

Deze component is een zeer speciale component. Het kan waarden houden, bijvoorbeeld `Number` en op hetzelfde moment kan het een andere leesbare `text`. Dit component wordt geoptimaliseerd voor dynamische gebruik, dus het moet worden verbonden met een ander component of onderdeel.


__Configuratie__:

- `icon {String}` icon voor etiket bijvoorbeeld huis, cog, enz.
- `label {String}` label (de standaard is HTML-inhoud)
- De `icon2 {String}`-icon in de rechterkant bijvoorbeeld thuis, cog, etc. (default: `angle-down`)
- `placeholder {String}` voegt een plaatshoudend tekst toe
- `disabled {Boolean}` is het bestanddeel
- `find {String}` __important__ link naar `function(el, next(value))` voor het binden van een nieuwe waarde
- `read {String}` een link naar `function(array_of_values, next(array_response))` voor het binden van een leesbare `text`
- `url {String}` probeert een waarde te binden via `AJAX()`, wordt het argument `{0}` in de URL vervangen door de waarde
- `html {String}` Tangular voor het geven van een waarde (default: `{{ name }}`)
- `remap {String}` Een remapfunctie (default: `null`Een voorbeeld: `value.length ? value[0] : null`
- `required {Boolean}` maakt het mogelijk om "verplicht" te zijn (default: `false`)
- `bind {String}` een route naar de methode of variabele waar de beladen waarde zal worden gebonden (optional)
- `dirsource {String}` een link naar de methode `function(search_string, next(items_arr))` of __NEW__: kan URL bevatten voor het zoeken in de vorm `GET /api/partners/?q={0}`
- `dircustom {String/Boolean}` kan een route bevatten naar functie(val, volgende(new_val)) of kan Boolean zijn. deze optie kan het toevoegen van een aangepaste waarde (waarde niet gedefinieerd in gegevensbron)
- `dirrender {String}` een route naar `function(item, text)` (must HTML terugvinden voor j-Directory), deze functie kan de lijst van items in j-Directory beïnvloeden
- `dirminwidth {Number}` een minimale breedte voor j-Directory, (default: `200`)
- `dirmaxwidth {Number}` een maximale breedte voor j-Directory
- `dirplaceholder {String}` een plaatshouder voor j-Directory
- `dirempty {String}` voegt een leeg veld toe voor j-Directory
- `dirkey {String}` is een sleutelnaam voor het lezen van tekst in dirsource (default: `name`)
- `dirvalue {String}` een sleutelnaam voor het lezen van waarde in dirsource (default: `id`)
- `key {String}` een primaire sleutelnaam (default: een waarde van `dirvalue`)
- __NEW__ `tapi {Boolean}` maakt het mogelijk om `TAPI()` insteadof `AJAX()` te bellen (default: vals)

### Ajax gebruik

Als de `value` Dan wordt de component veranderd. `AJAX` bellen automatisch. server moet reageren met `Array`.

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

### Inline gebruik

Als de `value` wordt gewijzigd, werkt de component `config.exec` voor het verkrijgen van een leesbaar tekst van een waarde.

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

Gebruik het met `<ui-component name="dynamicvaluelist">`Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in `DEF.fallback` (De Componentator Schrijver: Peter Širka. bron: de Componentator Componenten repository, MIT licentie.

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