Γράψτε ένα δικό σας jComponent

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

Ένα συστατικό δηλώνεται με COMPONENT(name, config, declaration). Το δεύτερο όρισμα είναι η προεπιλεγμένη ρύθμιση ως string (key:value;key:value). Η δήλωση παίρνει self (την παρουσία του συστατικού) και config (την αναλυμένη ρύθμιση).

το self.make εκτελείται μία φορά, όταν δημιουργείται το συστατικό. Χτίστε εδώ το DOM.
το self.setter(value) εκτελείται κάθε φορά που αλλάζει η τιμή του path του συστατικού.
το self.set(value) γράφει μια νέα τιμή στο path· το self.get() τη διαβάζει.

Χρησιμοποιήστε το συστατικό με ένα στοιχείο <ui-component>. Το name επιλέγει τη δήλωση, το path την κατάσταση και το config παρακάμπτει τις προεπιλογές.

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="counter" path="cart.count" config="step:2"></ui-component>
	<p>Total: <ui-bind path="cart.count" config="text:value"></ui-bind></p>

	<script>

		COMPONENT('counter', 'step:1', function(self, config) {

			self.make = function() {
				self.html('<button type="button">Add</button> <b class="value">0</b>');
				self.event('click', 'button', function() {
					self.set((self.get() || 0) + config.step);
				});
			};

			self.setter = function(value) {
				self.find('.value').text(value || 0);
			};

		});

		SET('cart.count', 10);

	</script>

</body>
</html>

Το ui-bind δίπλα στο συστατικό δείχνει ότι και τα δύο διαβάζουν την ίδια κατάσταση: το πάτημα του κουμπιού αλλάζει τη διαδρομή και ενημερώνεται κάθε στοιχείο που είναι δεμένο σε αυτήν.

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

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

Κώδικας

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