# j-DynamicValueList

> Tento komponent je veľmi špeciálny komponent. Dokáže ponechať hodnoty napríklad Number a zároveň dokáže vykresliť iný čitateľný text. Tento komponent je optimalizovaný pre dynamické použitie, takže musí byť li

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

Táto zložka je veľmi špeciálny komponent. Môže udržať hodnoty napríklad `Number` a zároveň môže urobiť ďalší čitateľný `text`. Táto zložky sú optimalizované pre dynamické použitie, takže musia byť spojené s inou zložkou alebo časťou.


__Konfigurácia__:

- `icon {String}` ikona pre štítok, napr. dom, cog, atď.
- `label {String}` štítok (predvolené je obsah HTML)
- `icon2 {String}` ikona v pravej krabici napr. domáce, kôrové atď. (predvolené: `angle-down`)
- `placeholder {String}` pridáva text
- `disabled {Boolean}` odstraňuje túto zložku
- `find {String}` __important__ odkaz na `function(el, next(value))` pre viazanosť novej hodnoty
- `read {String}` odkaz na `function(array_of_values, next(array_response))` pre prepojenie čitateľného `text`
- `url {String}` sa snaží viazať hodnotu prostredníctvom `AJAX()`, argument `{0}` v URL je nahradený hodnotou
- Šablóna `html {String}` Tangular pre hodnotu (predvolená: `{{ name }}`)
- `remap {String}` funkcia remap (default funkcia: `null`a príkladom: `value.length ? value[0] : null`
- `required {Boolean}` povolí "povinné" (predvolené: `false`)
- `bind {String}` je cesta k metóde alebo variabilu, kde bude viazaná zaťažená hodnota (voliteľná)
- `dirsource {String}` odkaz na metódu `function(search_string, next(items_arr))` alebo __NEW__: môže obsahovať URL pre vyhľadávanie vo forme boku `GET /api/partners/?q={0}`
- `dircustom {String/Boolean}` môže obsahovať cestu k funkcii(val, next(new_val)) alebo môže byť Boolean. Táto možnosť umožňuje pridávanie vlastnej hodnoty (hodnota nie je definovaná v zdroji údajov)
- `dirrender {String}` je cesta k `function(item, text)` (musí vrátiť HTML pre j-Directory), táto funkcia môže ovplyvniť zoznam položiek v j-Directory
- Minimálna šírka `dirminwidth {Number}` pre j-Directory, (predvolená: `200`)
- `dirmaxwidth {Number}` Maximálna šírka pre j-Directory
- `dirplaceholder {String}` - miesto držiteľ pre j-Directory
- `dirempty {String}` pridáva prázdne pole pre j-Directory
- `dirkey {String}` je kľúčový názov pre čítanie textu v zdroji (predvolené: `name`)
- `dirvalue {String}` je kľúčový názov pre čítanie hodnoty v zdroji (predvolené: `id`)
- `key {String}` primárny kľúčový názov (predvolená hodnota od `dirvalue`)
- __NEW__ `tapi {Boolean}` umožňuje volanie `TAPI()` insteadof `AJAX()` (predvolené: falošné)

### Použitie Ajax

Ak je to `value` Zmení sa, potom sa komponenty `AJAX` automaticky. server musí reagovať na `Array`.

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

### Inline použitie

Ak sa zmení `value`, komponent vykoná `config.exec` na získanie čitateľného textu hodnoty.

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

Použite ho so `<ui-component name="dynamicvaluelist">`. Keď komponent ešte nie je načítaný, jComponent ho stiahne pri prvom použití z adresy v `DEF.fallback` (predvolene CDN Componentator). Autor: Peter Širka. Zdroj: úložisko komponentov Componentator, licencia 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>
```