ForgeComponenten
nl

Componenten

j-DynamicValue

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

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


  • 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(value, next(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, 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)
  • onresponse {String} een weg naar eigendom of function(response), uitgevoerd als de reactie wordt verwerkt (default: undefined)
  • NEW tapi {Boolean} maakt het mogelijk om TAPI() insteadof AJAX() te bellen (default: vals)

Ajax gebruik

Als de value wordt gewijzigd, doet de component automatisch een AJAX oproep.

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

Goed om te weten:

  • component.response bevat een ruwe reactie van het resultaat

Gebruik het met <ui-component name="dynamicvalue">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
<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>