Skip to content

Instantly share code, notes, and snippets.

Last active March 15, 2024 06:18
Show Gist options
  • Save joakimbeng/7918297 to your computer and use it in GitHub Desktop.
Save joakimbeng/7918297 to your computer and use it in GitHub Desktop.
A really simple Javascript router
<!DOCTYPE html>
<meta charset="utf-8">
<title>Building a router</title>
// 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 type="text/html" id="home">
<h1>Router FTW!</h1>
<script type="text/html" id="template1">
<h1>Page 1: <%= greeting %></h1>
<p><%= moreText %></p>
<script type="text/html" id="template2">
<h1>Page 2: <%= heading %></h1>
<p>Lorem ipsum...</p>
<li><a href="#">Home</a></li>
<li><a href="#/page1">Page 1</a></li>
<li><a href="#/page2">Page 2</a></li>
<div id="view"></div>
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!';
Copy link

Copy link

thiloilg commented Nov 5, 2015

thank you!!! very helpful!!!

Copy link

rlynjb commented Mar 1, 2016

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

Copy link

@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

Copy link


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.

Copy link

vitiral commented Apr 6, 2018

Copy link

Thank you, its really good.

Copy link

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>


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