j-DynamicValueList

jComponent 20 · jcomponent@20 component Voorbeeld geladen met jComponent 20

Deze component is een zeer speciale component. Het kan waarden houden, bijvoorbeeld Number en op hetzelfde moment kan het een andere leesbare text. Dit component wordt geoptimaliseerd voor dynamische gebruik, dus het moet worden verbonden met een ander component of onderdeel.

Configuratie:

icon {String} icon voor etiket bijvoorbeeld huis, cog, enz.
label {String} label (de standaard is HTML-inhoud)
De icon2 {String}-icon in de rechterkant bijvoorbeeld thuis, cog, etc. (default: angle-down)
placeholder {String} voegt een plaatshoudend tekst toe
disabled {Boolean} is het bestanddeel
find {String} important link naar function(el, next(value)) voor het binden van een nieuwe waarde
read {String} een link naar function(array_of_values, next(array_response)) voor het binden van een leesbare text
url {String} probeert een waarde te binden via AJAX(), wordt het argument {0} in de URL vervangen door de waarde
html {String} Tangular voor het geven van een waarde (default: {{ name }})
remap {String} Een remapfunctie (default: nullEen voorbeeld: value.length ? value[0] : null
required {Boolean} maakt het mogelijk om "verplicht" te zijn (default: false)
bind {String} een route naar de methode of variabele waar de beladen waarde zal worden gebonden (optional)
dirsource {String} een link naar de methode function(search_string, next(items_arr)) of NEW: kan URL bevatten voor het zoeken in de vorm GET /api/partners/?q={0}
dircustom {String/Boolean} kan een route bevatten naar functie(val, volgende(new_val)) of kan Boolean zijn. deze optie kan het toevoegen van een aangepaste waarde (waarde niet gedefinieerd in gegevensbron)
dirrender {String} een route naar function(item, text) (must HTML terugvinden voor j-Directory), deze functie kan de lijst van items in j-Directory beïnvloeden
dirminwidth {Number} een minimale breedte voor j-Directory, (default: 200)
dirmaxwidth {Number} een maximale breedte voor j-Directory
dirplaceholder {String} een plaatshouder voor j-Directory
dirempty {String} voegt een leeg veld toe voor j-Directory
dirkey {String} is een sleutelnaam voor het lezen van tekst in dirsource (default: name)
dirvalue {String} een sleutelnaam voor het lezen van waarde in dirsource (default: id)
key {String} een primaire sleutelnaam (default: een waarde van dirvalue)
NEW tapi {Boolean} maakt het mogelijk om TAPI() insteadof AJAX() te bellen (default: vals)

Ajax gebruik

Als de value Dan wordt de component veranderd. AJAX bellen automatisch. server moet reageren met Array.

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

Inline gebruik

Als de value wordt gewijzigd, werkt de component config.exec voor het verkrijgen van een leesbaar tekst van een waarde.

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

Gebruik het met <ui-component name="dynamicvaluelist">Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in DEF.fallback (De Componentator Schrijver: Peter Širka. bron: de Componentator Componenten repository, MIT licentie.

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>