Referencia de instancia de componente: propiedades y métodos de self

jComponent 20 · jcomponent@20 jcomponentfrontendcomponentsreference Ejecutada con jComponent 20

Un componente está declarado con COMPONENT(name, defaultConfig, function(self, config, cls) { ... })La declaración se realiza una vez por cada <ui-component name="..."> de la página y recibe el caso (selfLa configuración (configEl mismo objeto que self.configy el prefixo de la clase (clsEsta página muestra lo que self tiene.

Ganchos que defines

Miembro	Cuándo se ejecuta
`self.make`	una vez, cuando el elemento está listo: construye aquí el DOM
`self.setter(value, path, flags)`	cada vez que cambia el valor de la ruta, y cuando el componente arranca; `flags` es un objeto
`self.destroy`	después de que el elemento se haya eliminado (consulta la receta del ciclo de vida)

Propiedades

Propiedad	Valor
`self.name`	el nombre del componente (`probe`)
`self.path.path`	la ruta como cadena (`form.name`)
`self.element`	el elemento `<ui-component>` como colección jQuery
`self.dom`	el mismo elemento como nodo del DOM
`self.config`	la configuración: los valores por defecto de la declaración, y después el atributo `config` del elemento. También contiene las banderas de estado: `invalid` desde el principio, `modified` y `touched` cuando el valor se modifica
`self.id`	un id único de la instancia
`self.ready`	`true` después de `make`

El valor

Método	Qué hace
`self.get()`	lee el valor de la ruta
`self.set(value)`	escribe el valor y ejecuta el `setter` de todos los componentes de esa ruta, también este
`self.update()`	ejecuta de nuevo el `setter` con el valor actual, sin cambiarlo
`self.rewrite(value)`	escribe el valor sin ejecutar el `setter` de este componente (a los demás se les notifica)
`self.modify(value)`	escribe el valor y marca el componente como modificado y tocado: `config.modified` y `config.touched` pasan a 1
`self.reset()`	borra esas banderas: `config.modified` y `config.touched` vuelven a 0
`self.GET(path)`, `self.SET(path, value)`	leen y escriben cualquier ruta del estado
`self.EXEC(name, a)`	llama a la función global `name`

El DOM del componente

self.html(html), self.text(text), self.append(html) y self.empty() cambian el contenido. self.find(selector) devuelve los elementos de dentro como jQuery. self.css(name, value) establece un estilo, self.attr(name, value) un atributo y self.attrd(name, value) un atributo data- (self.attrd('x') lee data-x). Las clases: self.aclass(name) añade, self.rclass(name) quita, self.hclass(name) dice si la tiene y self.tclass(name, [state]) la alterna o la fija en state. self.width() y self.height() devuelven números.

Eventos, observadores y comandos

Método	Qué hace
`self.on(name, fn)` / `self.emit(name, a)`	escucha y envía un evento con nombre de la página
`self.watch(path, fn, [autoinit])`	llama a `fn(value, flags, path)` cuando esa ruta cambia; con `autoinit` también una vez al principio. `+` une varias rutas
`self.reconfigure('size:9')`	cambia la configuración en tiempo de ejecución: `self.config.size` pasa a 9
`self.command(name, fn)` / `self.CMD(name, a)`	registra un comando de esta instancia y lo llama

No te fíes de esto

**self.unwatch(path, [fn]) No se puede retirar el agujero* jComponent 20: compara el camino parsado del guardián con una línea, por lo que nada se ajusta. unwatchSi necesitas detener una guardia, comproba una bandera dentro fn.
El CMD(name) global no llamó a un comando registrado con self.command: solo lo hizo self.CMD(name).

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="probe" path="form.name" config="size:3;title:Hello" id="probe"></ui-component>
	<script>
		window.log = {};
		window.events = [];
		COMPONENT('probe', 'size:1;flag:false', function(self, config, cls) {
			window.inst = self;
			self.make = function() {
				self.html('<p class="a">one</p><p class="b">two</p>');
				self.event('click', '.a', function() { window.events.push('click'); });
			};
			self.setter = function(value, path, type) {
				window.events.push('setter:' + value + ':' + path + ':' + type);
			};
		});
		SET('form.name', 'Ann');
	</script>
</body>
</html>

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