ForgeComponenti
it

Componenti

j-DynamicValue

jComponent 20 · jcomponent@20 component Esempio caricato con jComponent 20

Questo componente è molto speciale. può mantenere un valore per esempio Number e allo stesso tempo può rendere un altro leggibile text.Questo componente viene ottimizzato per uso dinamico, quindi deve essere collegato ad un altro componente o parte.


  • Icon icon {String} per l'etichetta, ad esempio casa, cog, ecc.
  • L’etichetta label {String} (contenuto predefinito HTML)
  • L'icona di icon2 {String} nella casella destra, ad esempio casa, cog, ecc. (default: angle-down)
  • placeholder {String} aggiunge un testo di localizzazione
  • disabled {Boolean} disabilita questo componente
  • find {String} important collegamento a function(el, next(value)) per legare un nuovo valore
  • read {String} un collegamento a function(value, next(response)) per legare una text leggibile
  • url {String} cerca di collegare un valore tramite AJAX(), l'argomento {0} nell'URL viene sostituito dal valore
  • Il modello html {String} Tangular per rendere un valore (default: {{ name }})
  • remap {String} La funzione di rimborso (default) nullIl esempio: value.length ? value[0] : null
  • required {Boolean} permette “necessario” (default: false)
  • bind {String} un percorso per il metodo o variabile in cui verrà collegato il valore caricato (opzionale)
  • dirsource {String} un collegamento al metodo function(search, next(items_arr)) o NEW: può contenere URL per la ricerca nel modulo GET /api/partners/?q={0}
  • dircustom {String/Boolean} può contenere un percorso a funzione(val, next(new_val)) o può essere Boolean.Questa opzione può consentire l'aggiunta di un valore personalizzato (valore non definito nella fonte dati)
  • dirrender {String} un percorso a function(item, text) (deve essere restituito HTML per j-Directory), questa funzione può influenzare l'elenco degli articoli in j-Directory
  • dirminwidth {Number} una larghezza minima per j-Directory, (default: 200)
  • dirmaxwidth {Number} a larghezza massima per j-Directory
  • dirplaceholder {String} per il sito di j-Directory
  • dirempty {String} aggiunge un campo vuoto per j-Directory
  • dirkey {String} un nome chiave per la lettura del testo in dirsource (default: name)
  • dirvalue {String} un nome chiave per la lettura del valore in dirsource (default: id)
  • onresponse {String} un percorso alla proprietà o function(response), eseguito se la risposta è elaborata (default: undefined)
  • NEW tapi {Boolean} consente di chiamare TAPI() insteadof AJAX() (default: falso)

Uso di Ajax

Se il value viene modificato, il componente esegue automaticamente la chiamata AJAX.

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

Uso in linea

Se il value viene modificato, allora il componente esegue config.exec per ottenere un testo leggibile di un valore.

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

Buono sapere:

  • component.response contiene una risposta cruda dal risultato

Utilizzare con <ui-component name="dynamicvalue">Quando il componente non è ancora caricato, jComponent Scarica il codice in prima utilizzazione dall'indirizzo DEF.fallback (Il Componentator La storia di Peter Širka.Fonte: il Componentator Ristorante dei componenti, licenza 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>