Skip to content

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.

Copy link
Owner Author

@joakimbeng joakimbeng commented Dec 11, 2013

@thiloilg

This comment has been minimized.

Copy link

@thiloilg thiloilg commented Nov 5, 2015

thank you!!! very helpful!!!

@rlynjb

This comment has been minimized.

Copy link

@rlynjb 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.

Copy link
Owner Author

@joakimbeng 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.

Copy link

@dannycallaghan 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.

Copy link

@vitiral vitiral commented Apr 6, 2018

@ganesh-vellanki

This comment has been minimized.

Copy link

@ganesh-vellanki ganesh-vellanki commented Sep 15, 2020

Thank you, its really good.

@naxo25

This comment has been minimized.

Copy link

@naxo25 naxo25 commented Feb 27, 2021

You can put this code to show you a 404 message when it can't find the route

try {
  if (el && route.controller) {
      el.innerHTML = tmpl(route.templateId, new route.controller());
  }
} catch(e) {
  console.error('ruta no defined')
  el.innerHTML = ` <p style='
                      display: flex;
                      position: fixed;
                      justify-content: center;
                      align-items: center;
                      width: 100%;
                      height: 100%;
                      top: 0;
                      left: 0;
                      background: white;
                      z-index: 10000;
                      font-weight: bold;
                      color: red;
                      margin: -10px 20px;'>
                        404 page not Found, <a href="#"> go / </a>
                  </p>`
}

image

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