Constructing the entry point of the application
While we were constructing the Gulp setup, we created a task for JavaScript bundling. Browserify needs an entry point to resolve dependencies. We set frontend/js/app.js
. Similarly, for the backend, we will build our logic around the router. The following code sets two routes and provides a helper function to render the Ractive.js component on the page:
// frontend/js/app.js var Router = require('./lib/Router')(); var Home = require('./controllers/Home'); var currentPage; var body; var showPage = function(newPage) { if(currentPage) { currentPage.teardown(); } currentPage = newPage; body.innerHTML = ''; currentPage.render(body); } window.onload = function() { body = document.querySelector('body'); Router .add('home', function() { var p = new Home(); showPage(p); }) .add(function() { Router.navigate('home'); }) .listen() .check(); }
We require the Router
variable at the top. Along with this, we need to fetch...