# Hitta och anropa komponenter och plugins: FIND, COMPONENTS, SETTER, EXE, TAPI, MIDDLEWARE och ADAPT

> Leta upp sidans komponenter efter namn eller sökväg, anropa en metod hos flera komponenter samtidigt, anropa funktioner via namn, använd två API-adresser med TAPI och PIPE, kör middleware före en rutt och ersätt markörerna i en text.

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

- `FIND(selector, [all])` returnerar en komponent som är redo: `'notice'` är dess **namn**, `'.msg'` dess **sökväg** (den matchar sökvägar som innehåller den) och `'#id'` dess id; med `all` satt till `true` returnerar den listan. `COMPONENTS(path)` returnerar listan över de redo komponenter vars sökväg ligger under `path`; flaggorna i en sökväg filtrerar den (`'msg @visible'`).
- `SETTER('name/method', a, b, c, d)` anropar `method` hos **varje** redo komponent med det namnet (`'.path/method'` för en sökväg, `'#id/method'` för ett id, `'*/method'` för alla). Ett namn som ännu inte är laddat laddas först (en lat komponent). `ASETTER(...)` anropar den inte: den returnerar en funktion som kommer att göra det.
- `EXE(name, a, b, c, d)` (samma som `EXEC()`) anropar det namnet säger: `'plugin/method'` en metod i ett plugin, `'function'` en global funktion, eller en sökväg i tillståndet som håller en funktion (`'FUNC.save'`). `SEEX(name, value)` är detsamma, men när namnet inte är en funktion **sätter** den sökvägen till `value`.
- `TAPI(name, data, callback)` är `API(DEF.api, ...)` och `PIPE(name, data, callback)` är `API(DEF.pipe, ...)`: två slutpunktsadresser som du sätter en gång i `DEF.api` och `DEF.pipe`.
- `MIDDLEWARE(name, function(next) {})` registrerar en funktion som körs före en rutt: den måste anropa `next()` för att släppa fram den. En rutt ber om en (eller flera, separerade med kommatecken) som tredje argument: `ROUTE('/path/', handler, 'name')`. `MIDDLEWARE(['a', 'b'], callback)` kör middleware i ordning och sedan callbacken; en som inte anropar `next()` stoppar kedjan.
- `NEWUIBIND(element, path, config)` skapar en `ui-bind` på ett element från koden (elementet behöver inte attributen) och returnerar den.
- `ADAPT(path, id, text)` förbereder texten för en komponent som kommer utifrån: den översätter `@(...)`, ersätter `~PATH~` och `CLASS` med sökvägen och `~ID~` med id:t, och lägger in `path` i de `<ui-plugin>`-taggar som saknar en. `COMPILE` är samma funktion som `NOOP` i jComponent 20: den gör ingenting.
- Objekten bakom allt: `jComponent`, `Total`, `MAIN` och `M` är samma objekt (motorn: `M.components` är listan över komponenter, `M.version` versionen), `W` är `window`, `DEF` standardvärdena, och `REPO`, `FUNC`, `TEMP` och `PLUGINS` är vanliga objekt som är dina: `FUNC` för funktioner som `EXE('FUNC.name')` kan anropa, `TEMP` töms av jComponent när sidan startar om.

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