Charger des parties d'une page avec ui-import

jComponent 20 · jcomponent@20 jcomponentfrontendimport Exécutée avec jComponent 20

<ui-import> télécharge un fichier HTML et le place dans la page, si bien qu'un grand écran peut être découpé en parties chargées au besoin. L'adresse va dans l'attribut config (url:/parts/card.html) ; target peut désigner un autre élément à remplir à la place du ui-import lui-même.

En code, utilisez IMPORT(url, target, callback) : la cible est un sélecteur ou un élément, et le callback s'exécute quand la partie est dans la page. Chaque adresse n'est téléchargée qu'une fois. La même fonction charge des scripts (.js) et des styles (.css). Les composants et les liaisons de la partie chargée se mettent à fonctionner automatiquement.

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>

Essayez-le dans votre navigateur

Modifiez l'exemple et exécutez-le. Il s'exécute dans un cadre isolé de votre navigateur ; rien n'est envoyé à notre serveur.

Code

Aperçu