j-DynamicValue

jComponent 20 · jcomponent@20 component Exemple chargé avec jComponent 20

Ce composant est un composant très spécial. Il peut conserver une valeur par exemple Number et en même temps rendre un autre text lisible. Ce composant est optimisé pour une utilisation dynamique, il doit donc être lié à un autre composant ou pièce.

Icône icon {String} pour l'étiquette, par ex. maison, rouage, etc.
Étiquette label {String} (la valeur par défaut est le contenu HTML)
Icône icon2 {String} dans la case de droite, par ex. maison, rouage, etc. (par défaut : angle-down)
placeholder {String} ajoute un texte d'espace réservé
disabled {Boolean} désactive ce composant
Lien find {String} important vers function(el, next(value)) pour lier une nouvelle valeur
read {String} un lien vers function(value, next(response)) pour lier un text lisible
url {String} tente de lier une valeur via AJAX(), l'argument {0} dans l'URL est remplacé par la valeur
Modèle html {String} Tangular pour le rendu d'une valeur (par défaut : {{ name }})
remap {String} une fonction de remappage (par défaut : null), exemple : value.length ? value[0] : null
required {Boolean} active "obligatoire" (par défaut : false)
bind {String} un chemin vers la méthode ou la variable où sera liée la valeur chargée (facultatif)
dirsource {String} un lien vers la méthode function(search, next(items_arr)) ou NEW : peut contenir l'URL de recherche sous la forme GET /api/partners/?q={0}
dircustom {String/Boolean} peut contenir un chemin vers function(val, next(new_val)) ou peut être booléen. Cette option peut permettre l'ajout d'une valeur personnalisée (valeur non définie dans la source de données)
dirrender {String} un chemin vers function(item, text) (doit renvoyer du HTML pour j-Directory), cette fonction peut affecter la liste des éléments dans j-Directory
dirminwidth {Number} une largeur minimale pour j-Directory, (par défaut : 200)
dirmaxwidth {Number} une largeur maximale pour j-Directory
dirplaceholder {String} un espace réservé pour j-Directory
dirempty {String} ajoute un champ vide pour j-Directory
dirkey {String} un nom de clé pour la lecture du texte dans le répertoire (par défaut : name)
dirvalue {String} un nom de clé pour la lecture de la valeur dans le répertoire (par défaut : id)
onresponse {String} un chemin vers la propriété ou function(response), exécuté si la réponse est traitée (par défaut : undefined)
NEW tapi {Boolean} permet d'appeler TAPI() au lieu de AJAX() (par défaut : false)

Utilisation d'AJAX

Si le value est modifié, le composant effectue automatiquement l'appel AJAX.

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

Utilisation en ligne

Si le value doit être modifié, le composant exécute config.exec pour obtenir un texte lisible d'une valeur.

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

Bon à savoir :

component.response contient une réponse brute du résultat

Utilisez-le avec <ui-component name="dynamicvalue">. Lorsque le composant n'est pas encore chargé, jComponent le télécharge lors de la première utilisation depuis l'adresse dans DEF.fallback (le CDN Componentator par défaut). Auteur : Peter Širka. Source : le référentiel de composants Componentator, licence 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>