j-Duplicator

jComponent 20 · jcomponent@20 component Beispiel mit jComponent 20 geladen

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

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

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>