# j-DynamicValueList

> Denna komponent är en mycket speciell komponent. Det kan hålla värden till exempel Antal och på samma sätt det kan göra en annan läsbar text.

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

Denna komponent är en mycket speciell komponent. Det kan hålla värden till exempel `Number` och på samma sätt det kan göra en annan läsbar `text`.Denna komponent är optimerad för dynamisk användning, så den måste kopplas till en annan komponent eller del.


__Konfigurera__:

- `icon {String}` ikon för etikett t.ex. hem, cog, etc.
- `label {String}` etikett (default är HTML-innehåll)
- `icon2 {String}`-ikonen i högerfönstret t.ex. hem, cog, etc. (default: `angle-down`)
- `placeholder {String}` lägger till en platsinnehavartext
- `disabled {Boolean}` inaktiverar denna komponent
- `find {String}` __important__ länk till `function(el, next(value))` för att binde ett nytt värde
- `read {String}` en länk till `function(array_of_values, next(array_response))` för att binde en läsbar `text`
- `url {String}` försöker knyta ett värde via `AJAX()`, argumentet `{0}` i URL ersätts av värdet
- `html {String}` Tangular för att ge ett värde (default: `{{ name }}`)
- `remap {String}` En remapfunktion (default) `null`och exempel: `value.length ? value[0] : null`
- `required {Boolean}` möjliggör ”nödvändigt” (default: `false`)
- `bind {String}` en väg till metoden eller variabel där det laddade värdet kommer att bindas (alternativt)
- `dirsource {String}` en länk till metoden `function(search_string, next(items_arr))` eller __NEW__: kan innehålla URL för sökning i backoformuläret `GET /api/partners/?q={0}`
- `dircustom {String/Boolean}` kan innehålla en väg till funktion(val, nästa(new_val)) eller kan vara Boolean.
- `dirrender {String}` en väg till `function(item, text)` (du måste returnera HTML för j-Directory), denna funktion kan påverka listan över objekt i j-Directory
- `dirminwidth {Number}` en minsta bredd för j-Directory, (default: `200`)
- `dirmaxwidth {Number}` Maximal bredd för j-Directory
- `dirplaceholder {String}` en platsinnehavare för j-Directory
- `dirempty {String}` lägger till ett tomt fält för j-Directory
- `dirkey {String}` ett nyckelnamn för läsning av text i direktkälla (default: `name`)
- `dirvalue {String}` ett nyckelnamn för läsning av värde i direktkälla (default: `id`)
- `key {String}` ett primärt nyckelnamn (default: ett värde från `dirvalue`)
- __NEW__ `tapi {Boolean}` möjliggör att ringa `TAPI()` insteadof `AJAX()` (default: falsk)

### Ajax användning

Om den `value` kommer att ändras och komponenten utförs `AJAX` automatiskt. server måste svara med `Array`.

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

### Inline användning

Om `value` ändras gör komponenten `config.exec` för att få en läsbar text av ett värde.

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

Använd den med `<ui-component name="dynamicvaluelist">`När komponenten ännu inte är laddad, jComponent Ladda ner den första gången från adressen i `DEF.fallback` (en av Componentator Författare: Peter Širka. källa: The Componentator Komponenterna i lager, MIT licens.

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