Referência de instância componente: propriedades e métodos de si mesmo

jComponent 20 · jcomponent@20 jcomponentfrontendcomponentsreference Executada com jComponent 20

Um componente é declarado com COMPONENT(name, defaultConfig, function(self, config, cls) { ... })A declaração é feita uma vez por cada <ui-component name="..."> A partir da página e recebendo a instância (selfA sua configuração (configO mesmo objeto como self.confige o prefixo da classe (clsEsta página lista o que self tem

Ganchos que define

Membro	Quando corre
`self.make`	uma vez, quando o elemento está pronto: construa aqui o DOM
`self.setter(value, path, flags)`	sempre que o valor do caminho muda, e quando o componente arranca; `flags` é um objeto
`self.destroy`	depois de o elemento ter sido removido (veja a receita do ciclo de vida)

Propriedades

Propriedade	Valor
`self.name`	o nome do componente (`probe`)
`self.path.path`	o caminho como cadeia (`form.name`)
`self.element`	o elemento `<ui-component>` como coleção jQuery
`self.dom`	o mesmo elemento como nó do DOM
`self.config`	a configuração: os valores por omissão da declaração, depois o atributo `config` do elemento. Contém também as bandeiras de estado: `invalid` desde o início, `modified` e `touched` quando o valor é modificado
`self.id`	um id único da instância
`self.ready`	`true` depois de `make`

O valor

Método	O que faz
`self.get()`	lê o valor do caminho
`self.set(value)`	escreve o valor e executa o `setter` de todos os componentes desse caminho, também este
`self.update()`	executa de novo o `setter` com o valor atual, sem o alterar
`self.rewrite(value)`	escreve o valor sem executar o `setter` deste componente (os outros são notificados)
`self.modify(value)`	escreve o valor e marca o componente como modificado e tocado: `config.modified` e `config.touched` passam a 1
`self.reset()`	limpa essas bandeiras: `config.modified` e `config.touched` voltam a 0
`self.GET(path)`, `self.SET(path, value)`	leem e escrevem qualquer caminho do estado
`self.EXEC(name, a)`	chama a função global `name`

O DOM do componente

self.html(html), self.text(text), self.append(html) e self.empty() alteram o conteúdo. self.find(selector) devolve os elementos de dentro como jQuery. self.css(name, value) define um estilo, self.attr(name, value) um atributo e self.attrd(name, value) um atributo data- (self.attrd('x') lê data-x). As classes: self.aclass(name) acrescenta, self.rclass(name) remove, self.hclass(name) diz se a tem e self.tclass(name, [state]) alterna-a ou define-a como state. self.width() e self.height() devolvem números.

Eventos, observadores e comandos

Método	O que faz
`self.on(name, fn)` / `self.emit(name, a)`	escuta e envia um evento com nome da página
`self.watch(path, fn, [autoinit])`	chama `fn(value, flags, path)` quando esse caminho muda; com `autoinit` também uma vez no início. `+` junta vários caminhos
`self.reconfigure('size:9')`	altera a configuração em tempo de execução: `self.config.size` passa a 9
`self.command(name, fn)` / `self.CMD(name, a)`	regista um comando desta instância e chama-o

Não confie nisto

**self.unwatch(path, [fn]) Não é possível remover o guarda-chuva* jComponent 20: compara o caminho parsed do guarda com uma fila, então nada se encaixa. unwatchSe você precisar parar um guarda, verifique uma bandeira no interior fn.
O CMD(name) global não chamou um comando registado com self.command: só self.CMD(name) o fez.

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>

Experimente no seu navegador

Edite o exemplo e execute-o. Corre numa moldura isolada do seu navegador; nada é enviado para o nosso servidor.

Código

Pré-visualização