j-DynamicValue

jComponent 20 · jcomponent@20 component Ejemplo cargado con jComponent 20

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.

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

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

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>