Teile einer Seite mit ui-import laden

jComponent 20 · jcomponent@20 jcomponentfrontendimport Mit jComponent 20 ausgeführt

<ui-import> lädt eine HTML-Datei und setzt sie in die Seite ein, sodass ein großer Bildschirm in Teile zerlegt werden kann, die bei Bedarf geladen werden. Die Adresse steht im Attribut config (url:/parts/card.html); target kann ein anderes Element benennen, das statt des ui-import selbst gefüllt wird.

Im Code nutze IMPORT(url, target, callback): Das Ziel ist ein Selektor oder ein Element, und der Callback läuft, wenn der Teil in der Seite ist. Jede Adresse wird nur einmal geladen. Dieselbe Funktion lädt Skripte (.js) und Stile (.css). Komponenten und Bindungen im geladenen Teil funktionieren automatisch.

public/parts/card.html

<div class="card">Hello <ui-bind path="user.name" config="text:value" class="who"></ui-bind></div>

public/parts/note.html

<div class="note">A note</div>

public/index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>jComponent</title>
	<link rel="stylesheet" href="//cdn.componentator.com/spa.min@20.css" />
	<script src="//cdn.componentator.com/spa.min@20.js"></script>
</head>
<body>
	<ui-import config="url:/parts/card.html"></ui-import>
	<div id="slot"></div>

	<script>
		var done = [];
		IMPORT('/parts/note.html', '#slot', function() { done.push('slot'); });
		SET('user.name', 'Peter');
	</script>

</body>
</html>

Probiere es in deinem Browser aus

Bearbeite das Beispiel und führe es aus. Es läuft in einem isolierten Frame in deinem Browser; nichts wird an unseren Server gesendet.

Code

Vorschau