# j-DynamicValue

> Este componente es un componente muy especial. Puede mantener un valor, 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 l

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

Este componente es un componente muy especial. Puede mantener un valor, 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.


- `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(value, next(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, 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`)
- `onresponse {String}` una ruta a la propiedad o `function(response)`, ejecutada si se procesa la respuesta (predeterminado: `undefined`)
- __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.

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

__Es bueno saberlo__:

- `component.response` contiene una respuesta sin procesar del resultado.

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