Een eigen jComponent schrijven

jComponent 20 · jcomponent@20 jcomponentfrontendcomponents Uitgevoerd met jComponent 20

Een component wordt gedeclareerd met COMPONENT(name, config, declaration). Het tweede argument is de standaardconfiguratie als string (key:value;key:value). De declaratie krijgt self (de component-instantie) en config (de geparsede configuratie).

self.make draait één keer, wanneer de component wordt aangemaakt. Bouw hier de DOM.
self.setter(value) draait telkens wanneer de waarde van het path van de component verandert.
self.set(value) schrijft een nieuwe waarde naar het path; self.get() leest hem.

Gebruik de component met een <ui-component>-element. name kiest de declaratie, path de state en config overschrijft de standaardwaarden.

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="counter" path="cart.count" config="step:2"></ui-component>
	<p>Total: <ui-bind path="cart.count" config="text:value"></ui-bind></p>

	<script>

		COMPONENT('counter', 'step:1', function(self, config) {

			self.make = function() {
				self.html('<button type="button">Add</button> <b class="value">0</b>');
				self.event('click', 'button', function() {
					self.set((self.get() || 0) + config.step);
				});
			};

			self.setter = function(value) {
				self.find('.value').text(value || 0);
			};

		});

		SET('cart.count', 10);

	</script>

</body>
</html>

De ui-bind naast de component laat zien dat beide dezelfde state lezen: een klik op de knop verandert het pad en elk eraan gebonden element wordt bijgewerkt.

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