Load parts of a page with ui-import

jComponent 20 · jcomponent@20 jcomponentfrontendimport Executed with jComponent 20

<ui-import> downloads an HTML file and puts it into the page, so a big screen can be split into parts that are loaded when needed. The address goes in the config attribute (url:/parts/card.html); target can name another element to fill instead of the ui-import itself.

In code use IMPORT(url, target, callback): the target is a selector or element, and the callback runs when the part is in the page. Each address is downloaded once. The same function loads scripts (.js) and styles (.css). Components and bindings inside the loaded part start working automatically.

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>

Try it in your browser

Edit the example and run it. It runs in an isolated frame in your browser; nothing is sent to our server.

Code

Preview