Δρομολόγηση σελίδων στον περιηγητή χωρίς επαναφόρτωση

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

Το jComponent έχει δικό του δρομολογητή για εφαρμογές μίας σελίδας. Το ROUTE(url, fn) καταχωρίζει μια διαδρομή: τα τμήματα {name} περνούν στο fn ως ορίσματα, με τη σειρά. Το REDIRECT(url) αλλάζει τη διεύθυνση με το History API (χωρίς φόρτωση σελίδας) και εκτελεί την αντίστοιχη διαδρομή. Οι διαδρομές συγκρίνονται τμήμα προς τμήμα: μια διαδρομή και ένα URL πρέπει να έχουν τον ίδιο αριθμό τμημάτων και το * ταιριάζει με οποιαδήποτε τιμή στη θέση του. Το NAV περιγράφει την τρέχουσα θέση: το NAV.url είναι η διαδρομή, το NAV.query το αναλυμένο query string και το NAV.params τα ορίσματα της διαδρομής. Τα NAV.back() και NAV.forward() κινούνται στο ιστορικό που κρατά το jComponent.

Για τον διακομιστή αυτό παραμένει μία σελίδα, οπότε κάθε URL κάτω από την εφαρμογή σας πρέπει να επιστρέφει το ίδιο HTML (ένα ROUTE('GET /*') που αποδίδει το σκελετό), αλλιώς μια επαναφόρτωση στο /users/5/ θα έδινε 404.

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 id="title"></h1>

	<script>

		ROUTE('/', function() {
			$('#title').text('Home');
		});

		ROUTE('/users/{id}/', function(id) {
			$('#title').text('User ' + id);
		});

		ROUTE('/files/*', function() {
			$('#title').text('Files');
		});

	</script>

</body>
</html>

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

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

Κώδικας

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