# j-Duplicator

> BETA-VERSION. Diese Komponente ist eine etwas besondere Komponente, da sie denselben Inhalt mehrmals mit unterschiedlichen Datenquellen duplizieren kann. Stellen Sie sich einen Texteditor mit Registerkarten vor, wobei jede Registerkarte Unterschiede enthält

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: de
Content-SHA256: 40baa8611bd775058eb06b6ff56edd0602215b2af5800be11eb0b39adbb64b80
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

__BETA-VERSION__. Diese Komponente ist eine etwas besondere Komponente, da sie denselben Inhalt mehrmals mit unterschiedlichen Datenquellen duplizieren kann. Stellen Sie sich einen Texteditor mit Registerkarten vor, wobei jede Registerkarte unterschiedliche Inhalte enthält. Für diesen Fall ist `j-Duplicator` vorgesehen. Folgen Sie dem Beispiel.

__Konfiguration__:

- `datasource` {Array} muss ein Array mit Inhalten zum Duplizieren enthalten
- `url` {String} optional, kann einen Link zu externen `template` __ohne `JavaScript`__ enthalten

__Gut zu wissen__:
Diese Komponente hängt die Funktion `.scopename()` an jedes Element des Arrays an, um den Umfang zu verwalten, und jeder Inhalt wird in das unabhängige Element `scope` mit direktem Verweis auf die Hauptquelle eingebunden.

### Erweiterte Vorlagen

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

Verwenden Sie es mit `<ui-component name="duplicator">`. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in `DEF.fallback` herunter (standardmäßig das CDN Componentator). Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

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