# j-DynamicValueList

> Este componente es un componente muy especial. Puede mantener valores, por ejemplo, Número y, al mismo tiempo, puede representar otro texto legible. Este componente está optimizado para uso dinámico, por lo que debe ser li

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

Este componente es un componente muy especial. Puede mantener valores, por ejemplo, `Number` y al mismo tiempo puede representar otro `text` legible. Este componente está optimizado para uso dinámico, por lo que debe vincularse con otro componente o pieza. Este componente funciona con matriz.


__Configuración__:

- `icon {String}` icono de etiqueta, p. hogar, engranaje, etc.
- Etiqueta `label {String}` (el valor predeterminado es contenido HTML)
- Icono `icon2 {String}` en el cuadro derecho, p. inicio, engranaje, etc. (predeterminado: `angle-down`)
- `placeholder {String}` agrega un texto de marcador de posición
- `disabled {Boolean}` desactiva este componente
- `find {String}` __important__ enlace a `function(el, next(value))` para vincular un nuevo valor
- `read {String}` un enlace a `function(array_of_values, next(array_response))` para vincular un `text` legible
- `url {String}` intenta vincular un valor a través de `AJAX()`, el argumento `{0}` en la URL se reemplaza por el valor
- `html {String}` Tangular plantilla para representar un valor (predeterminado: `{{ name }}`)
- `remap {String}` una función de reasignación (predeterminada: `null`), ejemplo: `value.length ? value[0] : null`
- `required {Boolean}` habilita "requerido" (predeterminado: `false`)
- `bind {String}` una ruta al método o variable donde se vinculará el valor cargado (opcional)
- `dirsource {String}` un enlace al método `function(search_string, next(items_arr))` o __NEW__: puede contener una URL para búsqueda en el formulario `GET /api/partners/?q={0}`
- `dircustom {String/Boolean}` puede contener una ruta a la función (val, siguiente (nuevo_val)) o puede ser booleana. Esta opción puede permitir agregar un valor personalizado (valor no definido en la fuente de datos)
- `dirrender {String}` una ruta a `function(item, text)` (debe devolver HTML para j-Directory), esta función puede afectar la lista de elementos en j-Directory
- `dirminwidth {Number}` un ancho mínimo para j-Directory, (predeterminado: `200`)
- `dirmaxwidth {Number}` un ancho máximo para j-Directory
- `dirplaceholder {String}` un marcador de posición para j-Directory
- `dirempty {String}` agrega un campo vacío para j-Directory
- `dirkey {String}` un nombre clave para leer texto en dirsource (predeterminado: `name`)
- `dirvalue {String}` un nombre clave para leer el valor en dirsource (predeterminado: `id`)
- `key {String}` un nombre de clave principal (predeterminado: un valor de `dirvalue`)
- __NEW__ `tapi {Boolean}` permite llamar a `TAPI()` en lugar de `AJAX()` (predeterminado: falso)

### uso de AJAX

Si se cambiará `value`, el componente realizará la llamada `AJAX` automáticamente. El servidor debe responder con `Array`.

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

### Uso en línea

Si se cambiará `value`, el componente realiza `config.exec` para obtener un texto legible de un valor.

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

Úselo con `<ui-component name="dynamicvaluelist">`. Cuando el componente aún no está cargado, jComponent lo descarga en el primer uso desde la dirección en `DEF.fallback` (el CDN Componentator de forma predeterminada). Autor: Peter Širka. Fuente: repositorio de componentes 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>
```