Πρώτα βήματα με το jComponent 20

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

Το jComponent 20 είναι ένα μόνο αρχείο (spa.min@20.js) που περιέχει ήδη το jQuery. Κρατά ένα καθολικό αντικείμενο κατάστασης: γράφετε σε αυτό με SET(path, value), το διαβάζετε με GET(path) και τα στοιχεία αντιδρούν στις αλλαγές. Το bundle έχει και ένα φύλλο στυλ, το spa.min@20.css, με τη γραμματοσειρά εικονιδίων του Total.js.

Το <ui-bind> δένει ένα στοιχείο σε μια διαδρομή της κατάστασης. Το χαρακτηριστικό config απαριθμεί εντολές χωρισμένες με ερωτηματικό (;)· το text:value ορίζει το κείμενο του στοιχείου στην τιμή της διαδρομής. Φορτώστε και τα δύο από το CDN, όπως κάνει κάθε παράδειγμα αυτού του ιστότοπου: <script src="//cdn.componentator.com/spa.min@20.js"></script> και <link rel="stylesheet" href="//cdn.componentator.com/spa.min@20.css" />. Αν θέλετε μόνο τα εικονίδια, φορτώστε μόνο το //cdn.componentator.com/icons.min.css (δεν χρειάζεται script). Οι έλεγχοι αυτού του ιστότοπου απαντούν στα αιτήματα για spa.min@20.js και spa.min@20.css με ένα τοπικό αντίγραφο της ίδιας έκδοσης και δεν φορτώνουν το αρχείο εικονιδίων.

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>

	<h1>Hello <ui-bind path="user.name" config="text:value"></ui-bind></h1>

	<script>
		SET('user.name', 'Peter');
	</script>

</body>
</html>

Καλέστε ξανά το SET('user.name', 'Louis') και ο τίτλος αλλάζει χωρίς κανένα δικό σας κώδικα DOM.

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

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

Κώδικας

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