j-Importer

j-Import is a great component for importing HTML templates, scripts or styles according to the path and condition. The component can help with SPA applications because you can easily import templates, scripts or styles dynamically.

Configuration:

• if {String} needs to contain a value
• url {String} relative/absolute URL to a subpage or subpart
• reload {String} a link to method in the global scope, it's executed if the condition is valid
• cleaner {Number} (optional) idle time (in minutes) for running of cleaning (default: 0)
• clean {String} (optional) a link to function, it's executed before the importer is cleaned
• id {String} a custom identifier for replacing ~ID~ phrases in the imported HTML (default: empty)
• NEW: singleton {Boolean} it handles only the one instance of importer according to the path + if + url (default: false)
• NEW: parent {String} it moves itself as a direct child of the parent selector
• NEW: adapt {Boolean} if true it calls the reload:?/soemthing method for the nested plugin instead of the current plugin (default: false)

New update:

j-Importer can contain <script type="text/html"> with a content which will be evaluated as HTML if the condition will be valid.

Good to know 1:

• all CLASS and ~PATH~ phrases will be replaced by config.path or config.if automatically
• all ~ID~ phrases will be replaced by config.id automatically
• importer automatically replaces <SCR> elements to <script> elements only within <script type="text/html"> template

Good to know 2:

If the part component isn't within scope then the value from the config.if will replace ? characters in all config keys.

Use it with <ui-component name="importer">. When the component is not loaded yet, jComponent downloads it on first use from the address in DEF.fallback (the Componentator CDN by default). Author: Peter Širka. Source: the Componentator components repository, MIT license.

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