# j-Duplicator

> Questo componente è un componente speciale perché può duplicare lo stesso contenuto più volte con una fonte di dati differenti. Immagini di alcuni editor di testo con le schede che ciascuna scheda contiene diff

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: it
Content-SHA256: 11c93219b826b269df0e1f0992a8da448ae312ee0fba7413604a1a5801ea7172
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

__BETA VERSIONE__. Questo componente è un componente speciale perché può duplicare lo stesso contenuto più volte con una fonte di dati differenti. Immagini di alcuni editor di testo con le schede che ogni scheda contiene contenuti diversi. `j-Duplicator`Seguite l’esempio

__Configurazione__:

- `datasource` {Array} deve contenere una serie di contenuti per la duplicazione
- `url` {String} opzionale, può contenere un collegamento a `template` esterno __senza `JavaScript`__

__Buono sapere__:
Questo componente aggiunge la funzione `.scopename()` a ciascun elemento di Array per il trattamento di scala e ogni contenuto viene inserito nella `scope` indipendente con riferimento diretto alla fonte principale.

### Modello avanzato

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

Utilizzare con `<ui-component name="duplicator">`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.

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