Instantly share code, notes, and snippets.

Embed
What would you like to do?
A really simple Javascript router
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Building a router</title>
<script>
// Put John's template engine code here...
// A hash to store our routes:
var routes = {};
//
function route (path, templateId, controller) {
routes[path] = {templateId: templateId, controller: controller};
}
var el = null;
function router () {
// Lazy load view element:
el = el || document.getElementById('view');
// Current route url (getting rid of '#' in hash as well):
var url = location.hash.slice(1) || '/';
// Get route by url:
var route = routes[url];
// Do we have both a view and a route?
if (el && route.controller) {
// Render route template with John Resig's template engine:
el.innerHTML = tmpl(route.templateId, new route.controller());
}
}
// Listen on hash change:
window.addEventListener('hashchange', router);
// Listen on page load:
window.addEventListener('load', router);
</script>
<script type="text/html" id="home">
<h1>Router FTW!</h1>
</script>
<script type="text/html" id="template1">
<h1>Page 1: <%= greeting %></h1>
<p><%= moreText %></p>
</script>
<script type="text/html" id="template2">
<h1>Page 2: <%= heading %></h1>
<p>Lorem ipsum...</p>
</script>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#/page1">Page 1</a></li>
<li><a href="#/page2">Page 2</a></li>
</ul>
<div id="view"></div>
<script>
route('/', 'home', function () {});
route('/page1', 'template1', function () {
this.greeting = 'Hello world!';
this.moreText = 'Bacon ipsum...';
});
route('/page2', 'template2', function () {
this.heading = 'I\'m page two!';
});
</script>
</body>
</html>
@joakimbeng

This comment has been minimized.

@thiloilg

This comment has been minimized.

thiloilg commented Nov 5, 2015

thank you!!! very helpful!!!

@rlynjb

This comment has been minimized.

rlynjb commented Mar 1, 2016

hello. i was wondering if there is a way to reload a current template and its controller?

@joakimbeng

This comment has been minimized.

Owner

joakimbeng commented Mar 8, 2016

@rlynjb I've updated the gist to include event handling and refreshing of routes. I've removed the Object.observe as well because it's already deprecated.

You register event listeners with the $on function in a controller, and you can trigger a refresh/rerender with the $refresh function. See the /page1 route in the example code above.

I still don't consider this a production ready solution though. For a more complete but still small router library have a look at: page

@dannycallaghan

This comment has been minimized.

dannycallaghan commented Nov 16, 2016

@Shyam-Chen

Put John's template engine code where it says:

// Put John's template engine code here...

The link to the code is in the first comment.

@vitiral

This comment has been minimized.

vitiral commented Apr 6, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment