# j-Duplicator

> BETA VERSION. Αυτό το στοιχείο είναι ένα λίγο ειδικό στοιχείο, επειδή μπορεί να διπλασιάσει το ίδιο περιεχόμενο αρκετές φορές με διαφανή πηγή δεδομένων.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: el
Content-SHA256: 927fe5e49d6bf3ce72b00f1278b144d5fa047b84795cf86d324da6bb5dcd2ad4
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

__BETA VERSION__. Αυτό το στοιχείο είναι ένα πολύ ειδικό στοιχείο, επειδή μπορεί να διπλασιάσει το ίδιο περιεχόμενο αρκετές φορές με διαφορετική πηγή δεδομένων. Φωτογραφία κάποιου επεξεργαστή κειμένου με κάρτες που κάθε καρτέλα περιέχει διαφορετικό περιεχόμενό. `j-Duplicator`Ακολουθήστε το παράδειγμα.

__ΕΠΙΤΡΟΦΗ__:

- `datasource` {Array} πρέπει να περιέχει μια σειρά περιεχομένου για διπλή
- `url` {String} προαιρετική, μπορεί να περιέχει σύνδεση προς το εξωτερικό `template` __χωρίς `JavaScript`__

__Καλό να ξέρεις__:
Αυτό το συστατικό προσθέτει τη λειτουργία `.scopename()` σε κάθε στοιχείο του Array για χειρισμό της έκτασης και κάθε περιεχόμενο τοποθετείται στο ανεξάρτητο `scope` με άμεση αναφορά στην κύρια πηγή.

### Προηγούμενο πρότυπο

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

Χρησιμοποιήστε το με `<ui-component name="duplicator">`Όταν το στοιχείο δεν έχει φορτωθεί ακόμα, jComponent Κατεβάστε το για πρώτη φορά από τη διεύθυνση `DEF.fallback` (Η Componentator Συγγραφέας: Peter Širka. πηγή: το Componentator Ετικέτες Αξιολόγηση, 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>
```