# Componenten en plugins zoeken en aanroepen: FIND, COMPONENTS, SETTER, EXE, TAPI, MIDDLEWARE en ADAPT

> Zoek de componenten van de pagina op naam of pad, roep een methode van meerdere componenten tegelijk aan, roep functies bij naam aan, gebruik twee API-adressen met TAPI en PIPE, voer middleware uit vóór een route en vervang de markeringen van een tekst.

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

- `FIND(selector, [all])` geeft een component terug dat klaar is: `'notice'` is zijn **naam**, `'.msg'` zijn **pad** (het komt overeen met de paden die het bevatten) en `'#id'` zijn id; met `all` op `true` geeft het de lijst terug. `COMPONENTS(path)` geeft de lijst terug van de gereedstaande componenten waarvan het pad onder `path` valt; de flags van een pad filteren haar (`'msg @visible'`).
- `SETTER('name/method', a, b, c, d)` roept `method` aan van **elk** gereed component met die naam (`'.path/method'` voor een pad, `'#id/method'` voor een id, `'*/method'` voor alle). Een naam die nog niet geladen is, wordt eerst geladen (een lazy component). `ASETTER(...)` roept het niet aan: het geeft een functie terug die dat zal doen.
- `EXE(name, a, b, c, d)` (hetzelfde als `EXEC()`) roept aan wat de naam zegt: `'plugin/method'` een methode van een plugin, `'function'` een globale functie, of een pad in de status dat een functie bevat (`'FUNC.save'`). `SEEX(name, value)` is hetzelfde, maar als de naam geen functie is, **zet** het het pad op `value`.
- `TAPI(name, data, callback)` is `API(DEF.api, ...)` en `PIPE(name, data, callback)` is `API(DEF.pipe, ...)`: twee endpointadressen die je eenmalig instelt in `DEF.api` en `DEF.pipe`.
- `MIDDLEWARE(name, function(next) {})` registreert een functie die vóór een route draait: zij moet `next()` aanroepen om haar door te laten. Een route vraagt er een (of meer, gescheiden door komma's) als derde argument: `ROUTE('/path/', handler, 'name')`. `MIDDLEWARE(['a', 'b'], callback)` voert de middleware in volgorde uit en daarna de callback; een die `next()` niet aanroept, stopt de keten.
- `NEWUIBIND(element, path, config)` maakt vanuit de code een `ui-bind` op een element (het element heeft de attributen niet nodig) en geeft het terug.
- `ADAPT(path, id, text)` bereidt de tekst voor van een component dat van buiten komt: het vertaalt `@(...)`, vervangt `~PATH~` en `CLASS` door het pad en `~ID~` door de id, en zet het `path` in de `<ui-plugin>`-tags die er geen hebben. `COMPILE` is dezelfde functie als `NOOP` in jComponent 20: hij doet niets.
- De objecten achter alles: `jComponent`, `Total`, `MAIN` en `M` zijn hetzelfde object (de engine: `M.components` is de lijst met componenten, `M.version` de versie), `W` is `window`, `DEF` de standaardwaarden, en `REPO`, `FUNC`, `TEMP` en `PLUGINS` zijn gewone objecten van jou: `FUNC` voor functies die `EXE('FUNC.name')` kan aanroepen, `TEMP` wordt door jComponent geleegd wanneer de pagina opnieuw begint.

```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>
```