j-Importer

j-Import är en bra komponent för att importera HTML-mallar, skript eller stilar enligt vägen och villkoren. komponenten kan hjälpa med SPA-applikationer eftersom du enkelt kan importera mallar, skripter eller stiler dynamiskt.

Konfigurera:

• if {String} måste innehålla ett värde
• url {String} relativa/absoluta URL till en undersida eller en subpart
• reload {String} en länk till metoden i den globala räckvidden, det utförs om villkoret är giltigt
• cleaner {Number} (alternativ) idletid (i minuter) för att köra rengöring (default: 0)
• clean {String} (alternativ) en länk till funktion, det körs innan importören rengörs
• id {String} en anpassad identifierare för att ersätta ~ID~ fraser i den importerade HTML (default: tom)
• NEW: singleton {Boolean} det hanterar endast en instans av importören enligt path + if + url (default: false)
• NEW: parent {String} det rör sig själv som ett direkt barn av parent selektorn
• NEW: adapt {Boolean} om true det kallar metoden reload:?/soemthing för den nedsänkta plugin istället för den aktuella plugin (default: false)

Ny uppdatering:

j-Importer kan innehålla <script type="text/html"> med ett innehåll som kommer att utvärderas som HTML om villkoret är giltigt.

Bra att veta 1:

• Alla CLASS och ~PATH~ fraser ersätts automatiskt med config.path eller config.if.
• Alla ~ID~-fraser ersätts automatiskt med config.id
• Importören ersätter automatiskt <SCR>-element till <script>-element endast inom <script type="text/html">-mallen

Bra att veta 2:

Om komponenten inte är inom räckhåll ersätter värdet från config.if ? tecken i alla konfigurationsnycklar.

Använd den med <ui-component name="importer">När komponenten ännu inte är laddad, jComponent Ladda ner den första gången från adressen i DEF.fallback (en av Componentator Författare: Peter Širka. källa: The Componentator Komponenterna i lager, MIT licens.

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