j-DynamicValue

jComponent 20 · jcomponent@20 component Beispiel mit jComponent 20 geladen

Diese Komponente ist eine ganz besondere Komponente. Es kann beispielsweise einen Wert Number behalten und gleichzeitig einen anderen lesbaren Wert text wiedergeben. Diese Komponente ist für die dynamische Nutzung optimiert und muss daher mit einer anderen Komponente oder einem anderen Teil verknüpft werden.

icon {String}-Symbol für Beschriftung, z. B. Zuhause, Zahnrad usw.
Label label {String} (Standard ist HTML-Inhalt)
icon2 {String}-Symbol im rechten Feld, z. B. Zuhause, Zahnrad usw. (Standard: angle-down)
placeholder {String} fügt einen Platzhaltertext hinzu
disabled {Boolean} deaktiviert diese Komponente
find {String} important Link zu function(el, next(value)) zum Binden eines neuen Werts
read {String} ein Link zu function(value, next(response)) zum Binden eines lesbaren text
url {String} versucht einen Wert über AJAX() zu binden, Argument {0} in der URL wird durch den Wert ersetzt
html {String} Tangular-Vorlage zum Rendern eines Werts (Standard: {{ name }})
remap {String} eine Remap-Funktion (Standard: null), Beispiel: value.length ? value[0] : null
required {Boolean} aktiviert „erforderlich“ (Standard: false)
bind {String} ein Pfad zur Methode oder Variablen, an die der geladene Wert gebunden wird (optional)
dirsource {String} ein Link zur Methode function(search, next(items_arr)) oder NEW: kann URL für die Suche im Formular GET /api/partners/?q={0} enthalten
dircustom {String/Boolean} kann einen Pfad zu function(val, next(new_val)) enthalten oder boolesch sein. Mit dieser Option kann das Hinzufügen eines benutzerdefinierten Werts aktiviert werden (Wert nicht in der Datenquelle definiert).
dirrender {String} ein Pfad zu function(item, text) (muss HTML für j-Directory zurückgeben), diese Funktion kann sich auf die Liste der Elemente in j-Directory auswirken
dirminwidth {Number} eine Mindestbreite für j-Directory (Standard: 200)
dirmaxwidth {Number} eine maximale Breite für j-Directory
dirplaceholder {String} ein Platzhalter für j-Directory
dirempty {String} fügt ein leeres Feld für j-Directory hinzu
dirkey {String} ein Schlüsselname zum Lesen von Text in dirsource (Standard: name)
dirvalue {String} ein Schlüsselname zum Lesen des Werts in dirsource (Standard: id)
onresponse {String} ein Pfad zur Eigenschaft oder function(response), ausgeführt, wenn die Antwort verarbeitet wird (Standard: undefined)
NEW tapi {Boolean} ermöglicht den Aufruf von TAPI() anstelle von AJAX() (Standard: false)

AJAX-Nutzung

Wenn value geändert wird, führt die Komponente den AJAX-Aufruf automatisch aus.

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

Inline-Nutzung

Wenn value geändert wird, führt die Komponente config.exec aus, um einen lesbaren Text eines Werts zu erhalten.

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

Gut zu wissen:

component.response enthält eine Rohantwort aus dem Ergebnis

Verwenden Sie es mit <ui-component name="dynamicvalue">. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in DEF.fallback herunter (standardmäßig das CDN Componentator). Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

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>