j-Duplicator

jComponent 20 · jcomponent@20 component Παράδειγμα φορτωμένο με jComponent 20

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

ΕΠΙΤΡΟΦΗ:

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

Καλό να ξέρεις:

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

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

<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 άδεια.

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>