Escribe un componente propio de jComponent

jComponent 20 · jcomponent@20 jcomponentfrontendcomponents Ejecutada con jComponent 20

Un componente se declara con COMPONENT(name, config, declaration). El segundo argumento es la configuración por defecto como cadena (clave:valor;clave:valor). La declaración recibe self (la instancia del componente) y config (la configuración ya procesada).

self.make se ejecuta una vez, cuando se crea el componente. Construye aquí el DOM.
self.setter(value) se ejecuta cada vez que cambia el valor del path del componente.
self.set(value) escribe un valor nuevo en el path; self.get() lo lee.

Usa el componente con un elemento <ui-component>. name elige la declaración, path el estado y config sustituye los valores por defecto.

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>

El ui-bind junto al componente demuestra que ambos leen el mismo estado: al pulsar el botón cambia el path y se actualizan todos los elementos enlazados a él.

Pruébalo en tu navegador

Edita el ejemplo y ejecútalo. Se ejecuta en un marco aislado de tu navegador; no se envía nada a nuestro servidor.

Código

Vista previa