# Συνιστώμενη αναφορά: ιδιότητες και μεθόδους του εαυτού

> Η δήλωση ενός συνόλου jComponent 20 και τι προσφέρει η περίπτωση του: ιδιότητες, μεθόδους αξίας, βοηθούς DOM, γεγονότα, παρατηρητές και εντολές.

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

Ένα στοιχείο δηλώνεται με `COMPONENT(name, defaultConfig, function(self, config, cls) { ... })`Η δήλωση εκτελείται μία φορά για κάθε `<ui-component name="...">` από την ιστοσελίδα και λαμβάνει την υπόθεση (`self`Η διαμόρφωση της (`config`Το ίδιο αντικείμενο όπως `self.config`και το πρότυπο της τάξης (`cls`Αυτή η σελίδα αναφέρει τι `self` Έχει

## Hooks που ορίζετε

| Μέλος | Πότε εκτελείται |
|---|---|
| `self.make` | μία φορά, όταν το στοιχείο είναι έτοιμο: χτίστε εδώ το DOM |
| `self.setter(value, path, flags)` | κάθε φορά που αλλάζει η τιμή της διαδρομής, και όταν ξεκινά το στοιχείο· το `flags` είναι αντικείμενο |
| `self.destroy` | αφού αφαιρεθεί το στοιχείο (δείτε τη συνταγή του κύκλου ζωής) |

## Ιδιότητες

| Ιδιότητα | Τιμή |
|---|---|
| `self.name` | το όνομα του στοιχείου (`probe`) |
| `self.path.path` | η διαδρομή ως συμβολοσειρά (`form.name`) |
| `self.element` | το στοιχείο `<ui-component>` ως συλλογή jQuery |
| `self.dom` | το ίδιο στοιχείο ως κόμβος DOM |
| `self.config` | η ρύθμιση: οι προεπιλογές της δήλωσης και μετά το χαρακτηριστικό `config` του στοιχείου. Περιέχει και τις σημαίες κατάστασης: `invalid` από την αρχή, `modified` και `touched` μόλις τροποποιηθεί η τιμή |
| `self.id` | ένα μοναδικό id της παρουσίας |
| `self.ready` | `true` μετά το `make` |

## Η τιμή

| Μέθοδος | Τι κάνει |
|---|---|
| `self.get()` | διαβάζει την τιμή της διαδρομής |
| `self.set(value)` | γράφει την τιμή και εκτελεί το `setter` κάθε στοιχείου αυτής της διαδρομής, και αυτού |
| `self.update()` | εκτελεί ξανά το `setter` με την τρέχουσα τιμή, χωρίς να την αλλάξει |
| `self.rewrite(value)` | γράφει την τιμή **χωρίς** να εκτελέσει το `setter` αυτού του στοιχείου (τα υπόλοιπα ειδοποιούνται) |
| `self.modify(value)` | γράφει την τιμή και σημαδεύει το στοιχείο ως τροποποιημένο και αγγιγμένο: τα `config.modified` και `config.touched` γίνονται 1 |
| `self.reset()` | καθαρίζει αυτές τις σημαίες: τα `config.modified` και `config.touched` επιστρέφουν στο 0 |
| `self.GET(path)`, `self.SET(path, value)` | διαβάζουν και γράφουν οποιαδήποτε διαδρομή της κατάστασης |
| `self.EXEC(name, a)` | καλεί την καθολική συνάρτηση `name` |

## Το DOM του στοιχείου

Τα `self.html(html)`, `self.text(text)`, `self.append(html)` και `self.empty()` αλλάζουν το περιεχόμενο. Το `self.find(selector)` επιστρέφει τα στοιχεία μέσα ως jQuery. Το `self.css(name, value)` ορίζει ένα στυλ, το `self.attr(name, value)` ένα χαρακτηριστικό και το `self.attrd(name, value)` ένα χαρακτηριστικό `data-` (το `self.attrd('x')` διαβάζει το `data-x`). Οι κλάσεις: το `self.aclass(name)` προσθέτει, το `self.rclass(name)` αφαιρεί, το `self.hclass(name)` λέει αν την έχει και το `self.tclass(name, [state])` την εναλλάσσει ή την ορίζει στο `state`. Τα `self.width()` και `self.height()` επιστρέφουν αριθμούς.

## Συμβάντα, παρατηρητές και εντολές

| Μέθοδος | Τι κάνει |
|---|---|
| `self.on(name, fn)` / `self.emit(name, a)` | ακούει και στέλνει ένα ονομασμένο συμβάν της σελίδας |
| `self.watch(path, fn, [autoinit])` | καλεί το `fn(value, flags, path)` όταν αλλάζει αυτή η διαδρομή· με `autoinit` και μία φορά στην αρχή. Το `+` ενώνει πολλές διαδρομές |
| `self.reconfigure('size:9')` | αλλάζει τη ρύθμιση κατά την εκτέλεση: το `self.config.size` είναι 9 |
| `self.command(name, fn)` / `self.CMD(name, a)` | καταχωρίζει μια εντολή αυτής της παρουσίας και την καλεί |

## Μην βασίζεστε σε αυτά

- **`self.unwatch(path, [fn])` Δεν αφαιρεί το ρολόι* jComponent 20: Συγκρίνει το μονοπάτι του παρατηρητή με μια γραμμή, οπότε τίποτα δεν ταιριάζει. `unwatch`Εάν χρειάζεται να σταματήσετε μια παρακολούθηση, ελέγξτε μια σημαία μέσα `fn`.
- **Το καθολικό `CMD(name)` δεν κάλεσε εντολή που καταχωρίστηκε με `self.command`**: μόνο το `self.CMD(name)` το έκανε.

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