j-DynamicValueList

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

Diese Komponente ist eine ganz besondere Komponente. Es kann beispielsweise Werte Number behalten und gleichzeitig einen anderen lesbaren 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. Diese Komponente arbeitet mit Array.

Konfiguration:

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(array_of_values, next(array_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_string, 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)
key {String} ein Primärschlüsselname (Standard: ein Wert aus dirvalue)
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. Der Server muss mit Array antworten.

<ui-component name="dynamicvaluelist" path="path.to.property" config="url:/users/?id={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="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>

Verwenden Sie es mit <ui-component name="dynamicvaluelist">. 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

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