Delen van een pagina laden met ui-import

jComponent 20 · jcomponent@20 jcomponentfrontendimport Uitgevoerd met jComponent 20

<ui-import> downloadt een HTML-bestand en zet het in de pagina, zodat een groot scherm kan worden opgedeeld in delen die worden geladen wanneer ze nodig zijn. Het adres staat in het attribuut config (url:/parts/card.html); target kan een ander element aanwijzen dat wordt gevuld in plaats van de ui-import zelf.

Gebruik in code IMPORT(url, target, callback): het doel is een selector of element en de callback draait wanneer het deel in de pagina staat. Elk adres wordt maar één keer gedownload. Dezelfde functie laadt scripts (.js) en stijlen (.css). Componenten en bindingen in het geladen deel gaan automatisch werken.

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>

Probeer het in je browser

Bewerk het voorbeeld en voer het uit. Het draait in een geïsoleerd frame in je browser; er wordt niets naar onze server gestuurd.

Code

Voorbeeld