ForgeComponenti
it

Componenti

j-Importer

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

j-Import è un ottimo componente per l'importazione di template HTML, script o stili in base al percorso e alla condizione.


Configurazione:

  • if {String} Bisogna contenere un valore
  • url {String} relative/absolute URL a una sottopagina o sottoparte
  • reload {String} è un collegamento al metodo nel campo globale, viene eseguito se la condizione è valida
  • cleaner {Number} (opzionale) tempo idle (in minuti) per il funzionamento della pulizia (default: 0)
  • clean {String} (opzionale) un collegamento alla funzione, viene eseguito prima che l'importatore sia pulito
  • id {String} un identificatore personalizzato per sostituire le frasi ~ID~ nel HTML importato (default: vuoto)
  • NEW: singleton {Boolean} tratta solo una singola instanza di importatore secondo la path + if + url (default: false)
  • NEW: parent {String} si muove come un bambino diretto del selettore parent
  • NEW: adapt {Boolean} se true si chiama il metodo reload:?/soemthing per il plug-in nested invece del plugin corrente (default: false)

Nuovo aggiornamento:

j-Importer può contenere <script type="text/html"> con un contenuto che sarà valutato come HTML se la condizione sarà valida.

Buono sapere 1:

  • Le frasi CLASS e ~PATH~ saranno sostituite automaticamente da config.path o config.if.
  • Le frasi ~ID~ saranno sostituite automaticamente da config.id
  • L'importatore sostituisce automaticamente gli elementi <SCR> agli elementi <script> solo all'interno del modello <script type="text/html">.

Bene di sapere 2:

Se il componente non è all'interno della portata, allora il valore del config.if sostituirà i caratteri ? in tutte le chiavi di configurazione.

Utilizzare con <ui-component name="importer">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>CURRENT VALUE: <ui-bind path="myvalue" config="html:value"></ui-bind></div>
<ui-component name="importer" path="myvalue" config="if:d3;url:https://d3js.org/d3.v4.min.js"></ui-component>

<script>

	var myvalue = '';

	setTimeout(function() {
		SET('myvalue', 'd3');
	}, 3000);

	setTimeout(function() {
		SET('myvalue', null);
	}, 5000);

	setTimeout(function() {
		// The component contains prevention for double import, so D3 won't be imported again.
		SET('myvalue', 'd3');
	}, 8000);

</script>