# j-Duplicator

> VERSIÓN BETA. Este componente es un poco especial porque puede duplicar el mismo contenido varias veces con diferentes fuentes de datos. Imagen de algún editor de texto con pestañas en las que cada pestaña contiene diferencias

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: es
Content-SHA256: 407acc6d1b6f7b6c308e5e4073869ef1b4f0e8e1c130df5e8bd2d69b21c8f299
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

__VERSIÓN BETA__. Este componente es un poco especial porque puede duplicar el mismo contenido varias veces con diferentes fuentes de datos. Imagen de algún editor de texto con pestañas, cada una de las cuales contiene contenido diferente. Para este caso está dirigido `j-Duplicator`. Sigue el ejemplo.

__Configuración__:

- `datasource` {Array} debe contener una variedad de contenido para duplicar
- `url` {String} opcional, puede contener un enlace a `template` externo __sin `JavaScript`__

__Es bueno saberlo__:
Este componente agrega la función `.scopename()` a cada elemento de Array para manejar el alcance y cada contenido se incluye en el `scope` independiente con referencia directa a la fuente principal.

### Plantillas avanzadas

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

Úselo con `<ui-component name="duplicator">`. Cuando el componente aún no está cargado, jComponent lo descarga en el primer uso desde la dirección en `DEF.fallback` (el CDN Componentator de forma predeterminada). Autor: Peter Širka. Fuente: repositorio de componentes Componentator, licencia 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>
```