# j-Duplicator

> VERSION BÊTA. Ce composant est un composant un peu spécial car il peut dupliquer plusieurs fois le même contenu avec des sources de données différentes. Imaginer un éditeur de texte avec des onglets dont chaque onglet contient des différences

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: fr
Content-SHA256: 2f22c1a7a6f284012a2e993ff9427976cec53d1b625df4f368d30c972bfb6033
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

__VERSION BÊTA__. Ce composant est un composant un peu spécial car il peut dupliquer plusieurs fois le même contenu avec des sources de données différentes. Imaginer un éditeur de texte avec des onglets dont chaque onglet contient un contenu différent. Pour ce cas est ciblé `j-Duplicator`. Suivez l'exemple.

__Configuration__ :

- `datasource` {Array} doit contenir un tableau de contenu pour la duplication
- `url` {String} facultatif, peut contenir un lien vers un `template` externe __sans `JavaScript`__

__Bon à savoir__ :
Ce composant ajoute la fonction `.scopename()` à chaque élément du tableau pour la gestion de la portée et chaque contenu est enveloppé dans le `scope` indépendant avec référence directe à la source principale.

### Modèles avancés

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

Utilisez-le avec `<ui-component name="duplicator">`. Lorsque le composant n'est pas encore chargé, jComponent le télécharge lors de la première utilisation depuis l'adresse dans `DEF.fallback` (le CDN Componentator par défaut). Auteur : Peter Širka. Source : le référentiel de composants Componentator, licence 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>
```