# Hľadanie a volanie komponentov a pluginov: FIND, COMPONENTS, SETTER, EXE, TAPI, MIDDLEWARE a ADAPT

> Hľadajte komponenty stránky podľa názvu alebo cesty, volajte metódu viacerých komponentov naraz, volajte funkcie podľa názvu, používajte dve adresy API cez TAPI a PIPE, spúšťajte middleware pred routou a nahrádzajte značky v texte.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: sk
Content-SHA256: d6788f951b8589a7c08ecc2d3ecb27b5d4527abd6bfe4e14087d40982194b132
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: jcomponent20@3fedd009a277f50fddc608b97afbec553b67c51b
Review: not-recorded

- `FIND(selector, [all])` vráti komponent, ktorý je pripravený: `'notice'` je jeho **názov**, `'.msg'` jeho **cesta** (zodpovedá cestám, ktoré ho obsahujú) a `'#id'` jeho id; s `all` nastaveným na `true` vráti zoznam. `COMPONENTS(path)` vráti zoznam pripravených komponentov, ktorých cesta je pod `path`; príznaky cesty ju filtrujú (`'msg @visible'`).
- `SETTER('name/method', a, b, c, d)` zavolá `method` **každého** pripraveného komponentu s týmto názvom (`'.path/method'` pre cestu, `'#id/method'` pre id, `'*/method'` pre všetky). Názov, ktorý ešte nie je načítaný, sa najprv načíta (lenivý komponent). `ASETTER(...)` ho nevolá: vráti funkciu, ktorá to urobí.
- `EXE(name, a, b, c, d)` (rovnaké ako `EXEC()`) zavolá to, čo hovorí názov: `'plugin/method'` metódu pluginu, `'function'` globálnu funkciu, alebo cestu v stave, ktorá drží funkciu (`'FUNC.save'`). `SEEX(name, value)` je to isté, ale keď názov nie je funkcia, **nastaví** cestu na `value`.
- `TAPI(name, data, callback)` je `API(DEF.api, ...)` a `PIPE(name, data, callback)` je `API(DEF.pipe, ...)`: dve adresy endpointov, ktoré nastavíte raz v `DEF.api` a `DEF.pipe`.
- `MIDDLEWARE(name, function(next) {})` zaregistruje funkciu, ktorá sa spustí pred routou: musí zavolať `next()`, aby ju pustila ďalej. Routa si pýta jeden (alebo viac, oddelených čiarkami) ako tretí argument: `ROUTE('/path/', handler, 'name')`. `MIDDLEWARE(['a', 'b'], callback)` spustí middleware v poradí a potom callback; ten, ktorý nezavolá `next()`, reťaz zastaví.
- `NEWUIBIND(element, path, config)` vytvorí `ui-bind` na elemente z kódu (element nepotrebuje atribúty) a vráti ho.
- `ADAPT(path, id, text)` pripraví text komponentu, ktorý prichádza zvonku: preloží `@(...)`, nahradí `~PATH~` a `CLASS` cestou a `~ID~` id, a vloží `path` do značiek `<ui-plugin>`, ktoré ho nemajú. `COMPILE` je tá istá funkcia ako `NOOP` v jComponent 20: nerobí nič.
- Objekty za všetkým: `jComponent`, `Total`, `MAIN` a `M` sú ten istý objekt (engine: `M.components` je zoznam komponentov, `M.version` verzia), `W` je `window`, `DEF` predvolené hodnoty a `REPO`, `FUNC`, `TEMP` a `PLUGINS` sú vaše jednoduché objekty: `FUNC` pre funkcie, ktoré `EXE('FUNC.name')` môže volať, `TEMP` vyprázdni jComponent, keď sa stránka spustí znova.

```js definitions/math.js
NEWACTION('Math/add', {
	name: 'Add two numbers',
	input: '*a:Number, *b:Number',
	action: function($, model) {
		$.callback({ sum: model.a + model.b });
	}
});
```

```js controllers/api.js
exports.install = function() {
	ROUTE('API /api/ +math_add --> Math/add');
	ROUTE('API /pipe/ +math_add --> Math/add');
};
```

```html 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="notice" path="msg"></ui-component>
	<ui-component name="notice" path="other"></ui-component>
	<ui-plugin path="shop"></ui-plugin>
	<p id="target">x</p>
	<script>

		COMPONENT('notice', function(self) {
			self.make = function() { self.element.html('<b></b>'); };
			self.say = function(text, extra) { self.find('b').text(text + (extra || '')); };
		});

		PLUGIN('shop', function(exports) {
			exports.hello = function(a) { window.shoplog = 'hello ' + a; };
		});

		window.globalfn = function(a, b) { window.globallog = [a, b]; };
		FUNC.local = function(a) { window.funclog = a; };

		DEF.api = '/api/';
		DEF.pipe = '/pipe/';

	</script>
</body>
</html>
```