j-Duplicator

jComponent 20 · jcomponent@20 component Example loaded with jComponent 20

BETA VERSION. This component is a bit special component because it can duplicate same content several times with diffferent data-source. Imaging some text editor with tabs which each tab contains different content. For this case is targeted j-Duplicator. Follow example.

Configuration:

datasource {Array} must contain array of content for duplicating
url {String} optional, can contain a link to external template without JavaScript

Good to know:

This component appends .scopename() function to each item of Array for handling of scope and each content is wrapped in to the independent scope with direct reference to main source.

Advanced templating

<ui-component name="duplicator" path="mytab" config="datasource:tabs" class="invisible">

	<script type="text/html" data-id="PRODUCT">
		<ui-component name="input" path="?.name">Name</ui-component>
	</script>

	<script type="text/html" data-id="USER">
		<ui-component name="input" path="?.age">Age</ui-component>
	</script>

	<!-- DYNAMIC -->
	<script type="text/html" data-id="ORDER" data-url="/templates/orders.html"></script>
</ui-component>

<script>

	// All tabs
	var tabs = [];
	tabs.push({ template: 'PRODUCT', name: 'iPhone X' });
	tabs.push({ template: 'USER', age: 30 });
	tabs.push({ template: 'ORDER', price: 324 });

	// Choose a default open tab
	var mytab = tabs[0];

</script>

Use it with <ui-component name="duplicator">. 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.

example.html

<ui-bind path="tabs" config="template;click span:choosetab" class="block">
	<script type="text/html">
		{{ foreach m in value }}
			<span data-index="{{ $index }}" class="mr5 link">{{ $index + 1 }}</span>
		{{ end }}
	</script>
</ui-bind>

<h2>Duplicator</h2>

<ui-component name="duplicator" path="mytab" config="datasource:tabs" class="invisible">
	<script type="text/html">
		<ui-component name="input" path="?.name">Name</ui-component>
	</script>
</ui-component>

<script>

	var tabs = [];
	tabs.push({ name: 'Peter' });
	tabs.push({ name: 'Lucka' });
	tabs.push({ name: 'Betka' });

	function choosetab(el) {
		var index = +el.attrd('index');
		SET('mytab', tabs[index]);
	}

	// Default tab
	SET('mytab', tabs[0]);

</script>