# j-DynamicValue

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

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

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


- `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(value, next(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, 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`)
- `onresponse {String}` je cesta k majetku alebo `function(response)`, ktorá sa vykonáva, ak je odpoveď spracovaná (predvolená: `undefined`)
- __NEW__ `tapi {Boolean}` umožňuje volanie `TAPI()` insteadof `AJAX()` (predvolené: falošné)

### Použitie Ajax

Ak sa `value` zmení, potom komponenta vykoná volanie `AJAX` automaticky.

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

__Je dobré vedieť__:

- `component.response` obsahuje surovú odpoveď z výsledku

Použite ho so `<ui-component name="dynamicvalue">`. 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
<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>
```