-
-
Save joakimbeng/7918297 to your computer and use it in GitHub Desktop.
<!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> |
thank you!!! very helpful!!!
hello. i was wondering if there is a way to reload a current template and its controller?
@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
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.
Here is the full code with the templaeting engine: https://github.com/vitiral/notes/blob/ad75620f9b5445b18369408a7b23666e84624c0d/js/router/index.html
Thank you, its really good.
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>`
}
John Resig's micro templating engine is found here