# j-DynamicValue

> Deze component is een zeer speciale component. Het kan een waarde 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: 0d15f07a2ca43366112d325dca35cafa1cbe95dd22023575e2002312e7775987
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

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


- `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(value, next(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, 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`)
- `onresponse {String}` een weg naar eigendom of `function(response)`, uitgevoerd als de reactie wordt verwerkt (default: `undefined`)
- __NEW__ `tapi {Boolean}` maakt het mogelijk om `TAPI()` insteadof `AJAX()` te bellen (default: vals)

### Ajax gebruik

Als de `value` wordt gewijzigd, doet de component automatisch een `AJAX` oproep.

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

__Goed om te weten__:

- `component.response` bevat een ruwe reactie van het resultaat

Gebruik het met `<ui-component name="dynamicvalue">`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
<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>
```