Een bibliotheek laden voordat een component start

jComponent 20 · jcomponent@20 jcomponentfrontendcomponentsdependencies Uitgevoerd met jComponent 20

Het vierde argument van COMPONENT() is een lijst van afhankelijkheden: URL's van scripts (.js) of stijlen (.css) die de component nodig heeft. jComponent downloadt elke maar één keer, op volgorde, en maakt de component nadat ze zijn geladen, zodat make() erop kan rekenen dat de bibliotheek er is. Zo verpak je een bibliotheek van derden in een component zonder haar te laden op pagina's die haar niet gebruiken.

public/js/starslib.js

window.starslib = {
	render: function(count) {
		var html = '';
		for (var i = 0; i < count; i++)
			html += '<span class="star">*</span>';
		return html;
	}
};

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-component name="stars" config="count:3"></ui-component>

	<script>

		COMPONENT('stars', 'count:5', function(self, config) {

			self.make = function() {
				// starslib.js was loaded before make()
				self.html(window.starslib.render(config.count));
			};

		}, ['/js/starslib.js']);

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