j-DynamicValueList

jComponent 20 · jcomponent@20 component Príklad načítaný s jComponent 20

Táto zložka je veľmi špeciálny komponent. Môže udržať hodnoty napríklad Number a zároveň môže urobiť ďalší čitateľný text. Táto zložky sú optimalizované pre dynamické použitie, takže musia byť spojené s inou zložkou alebo časťou.

Konfigurácia:

icon {String} ikona pre štítok, napr. dom, cog, atď.
label {String} štítok (predvolené je obsah HTML)
icon2 {String} ikona v pravej krabici napr. domáce, kôrové atď. (predvolené: angle-down)
placeholder {String} pridáva text
disabled {Boolean} odstraňuje túto zložku
find {String} important odkaz na function(el, next(value)) pre viazanosť novej hodnoty
read {String} odkaz na function(array_of_values, next(array_response)) pre prepojenie čitateľného text
url {String} sa snaží viazať hodnotu prostredníctvom AJAX(), argument {0} v URL je nahradený hodnotou
Šablóna html {String} Tangular pre hodnotu (predvolená: {{ name }})
remap {String} funkcia remap (default funkcia: nulla príkladom: value.length ? value[0] : null
required {Boolean} povolí "povinné" (predvolené: false)
bind {String} je cesta k metóde alebo variabilu, kde bude viazaná zaťažená hodnota (voliteľná)
dirsource {String} odkaz na metódu function(search_string, next(items_arr)) alebo NEW: môže obsahovať URL pre vyhľadávanie vo forme boku GET /api/partners/?q={0}
dircustom {String/Boolean} môže obsahovať cestu k funkcii(val, next(new_val)) alebo môže byť Boolean. Táto možnosť umožňuje pridávanie vlastnej hodnoty (hodnota nie je definovaná v zdroji údajov)
dirrender {String} je cesta k function(item, text) (musí vrátiť HTML pre j-Directory), táto funkcia môže ovplyvniť zoznam položiek v j-Directory
Minimálna šírka dirminwidth {Number} pre j-Directory, (predvolená: 200)
dirmaxwidth {Number} Maximálna šírka pre j-Directory
dirplaceholder {String} - miesto držiteľ pre j-Directory
dirempty {String} pridáva prázdne pole pre j-Directory
dirkey {String} je kľúčový názov pre čítanie textu v zdroji (predvolené: name)
dirvalue {String} je kľúčový názov pre čítanie hodnoty v zdroji (predvolené: id)
key {String} primárny kľúčový názov (predvolená hodnota od dirvalue)
NEW tapi {Boolean} umožňuje volanie TAPI() insteadof AJAX() (predvolené: falošné)

Použitie Ajax

Ak je to value Zmení sa, potom sa komponenty AJAX automaticky. server musí reagovať na Array.

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

Inline použitie

Ak sa zmení value, komponent vykoná config.exec na získanie čitateľného textu hodnoty.

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

Použite ho so <ui-component name="dynamicvaluelist">. Keď komponent ešte nie je načítaný, jComponent ho stiahne pri prvom použití z adresy v DEF.fallback (predvolene CDN Componentator). Autor: Peter Širka. Zdroj: úložisko komponentov Componentator, licencia MIT.

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>