Pisanie własnego komponentu jComponent

jComponent 20 · jcomponent@20 jcomponentfrontendcomponents Uruchomiono z jComponent 20

Komponent deklaruje się przez COMPONENT(name, config, declaration). Drugi argument to domyślna konfiguracja jako napis (key:value;key:value). Deklaracja dostaje self (instancję komponentu) i config (sparsowaną konfigurację).

self.make wykonuje się raz, gdy komponent jest tworzony. Zbuduj tu DOM.
self.setter(value) wykonuje się za każdym razem, gdy zmienia się wartość path komponentu.
self.set(value) zapisuje nową wartość do path; self.get() ją czyta.

Użyj komponentu z elementem <ui-component>. name wybiera deklarację, path stan, a config nadpisuje wartości domyślne.

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>

ui-bind obok komponentu pokazuje, że oba czytają ten sam stan: kliknięcie przycisku zmienia ścieżkę i aktualizuje się każdy element z nią powiązany.

Wypróbuj w przeglądarce

Edytuj przykład i uruchom go. Działa w izolowanej ramce w Twojej przeglądarce; nic nie jest wysyłane na nasz serwer.

Kod

Podgląd