-
-
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