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

jComponent 20 · jcomponent@20 jcomponentfrontendcomponentsreference Εκτελέστηκε με jComponent 20

Ένα στοιχείο δηλώνεται με 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) το έκανε.

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>

Δοκιμάστε το στον browser σας

Επεξεργαστείτε το παράδειγμα και εκτελέστε το. Εκτελείται σε απομονωμένο πλαίσιο στον browser σας· τίποτα δεν στέλνεται στον διακομιστή μας.

Κώδικας

Προεπισκόπηση