j-DynamicValue

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

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

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(value, next(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, 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)
onresponse {String} je cesta k majetku alebo function(response), ktorá sa vykonáva, ak je odpoveď spracovaná (predvolená: undefined)
NEW tapi {Boolean} umožňuje volanie TAPI() insteadof AJAX() (predvolené: falošné)

Použitie Ajax

Ak sa value zmení, potom komponenta vykoná volanie AJAX automaticky.

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

Je dobré vedieť:

component.response obsahuje surovú odpoveď z výsledku

Použite ho so <ui-component name="dynamicvalue">. 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

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