ForgeKomponensek
hu

Komponensek

j-DynamicValueList

jComponent 20 · jcomponent@20 component Példa betöltve a jComponent 20-szal

Ez az összetevő nagyon speciális komponens. megtarthatja az értékeket, például a Number és ugyanabban az esetben egy másik olvasható text. Ez a komponens optimalizált dinamikus használatra, ezért köthető egy másik komponenshez vagy részéhez.


konfiguráció:

  • icon {String} ikon a címkén, például otthon, cog stb.
  • label {String} címke (az alapértelmezett HTML tartalom)
  • icon2 {String} ikon a jobb dobozban, például otthon, cog stb. (default: angle-down)
  • A placeholder {String} hozzáad egy helytartó szöveget
  • A disabled {Boolean} eltávolítja ezt az összetevőt
  • find {String} important link a function(el, next(value)) egy új érték kötésére
  • read {String} egy link a function(array_of_values, next(array_response)) kötődéséhez olvasható text
  • A url {String} megpróbálja összekapcsolni egy értéket a AJAX()-en keresztül, az URL-ben található {0}-es érv helyébe az érték lép.
  • html {String} Tangular szabvány az érték rendereléséhez (default: {{ name }})
  • remap {String} Az alapértelmezett funkció (default) nullPéldául a: value.length ? value[0] : null
  • A required {Boolean} lehetővé teszi a „követelt” (default: false)
  • bind {String} egy út a módszerre vagy változóra, ahol a terhelett érték köthető (opcionális)
  • dirsource {String} egy link a módszer function(search_string, next(items_arr)) vagy NEW: tartalmazhat URL-t keresési formanyomtatvány GET /api/partners/?q={0}
  • dircustom {String/Boolean} tartalmazhat egy útvonalat a funkció(val, next(new_val)) vagy lehet Boolean. Ez az opció lehetővé teszi a hozzáadott értéket (érték nem meghatározott adatforrás)
  • dirrender {String} Egy út a function(item, text) (a HTML-t vissza kell adni a j-DirectoryEz a funkció befolyásolhatja az elemek listáját j-Directory
  • dirminwidth {Number} minimum szélesség a j-Directory, (default: 200)
  • dirmaxwidth {Number} a maximális szélességhez j-Directory
  • dirplaceholder {String} egy helytartó a j-Directory
  • A dirempty {String} egy üres mezőt ad a j-Directory számára
  • dirkey {String} kulcsszavak a szöveg olvasásához a forrásban (default: name)
  • dirvalue {String} kulcsszavak a forrás értékének olvasásához (előzetes: id)
  • key {String} elsődleges kulcsszavak (default: a dirvalue értéke)
  • NEW tapi {Boolean} lehetővé teszi a TAPI() insteadof AJAX() hívását (default: hamis)

Ajax használata

Ha a value A változás után a komponens AJAX automatikus hívás. a szervernek válaszolnia kell Array.

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

Inline használata

Ha a value módosul, akkor az összetevő config.exec-et hajt végre, hogy olvasható értéket kapjon.

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

Használja a <ui-component name="dynamicvaluelist">Amennyiben a készülék még nem tölthető le, jComponent letöltés az első felhasználásra a címről DEF.fallback (Azt a Componentator A szerző: Peter Širka. forrás: a Componentator Az összetevők raktár, MIT licenc.

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>