floaty
Simple JS frontend route and template framework
Register template
Register a template by getting the content from an already existing place in the HTML.
floaty.template('frontpage', 'template#frontpage');Register a template by directly supplying the HTML.
floaty.template('frontpage', '<h1>Frontpage</h1>');Register a template by requestint a file.
floaty.template('frontpage', '/partials/frontpage.html');Rendering a template
Render a template by giving the name it was registered as, the selector where to put the content, and an optional set of values to replace inside the template.
floaty.render('frontpage', 'article#content');floaty.render('frontpage', 'article#content', { name: 'Mr. Awesome' });This will replace {{ name }} with Mr. Awesome in the HTML before applying it to the article#content selector.
Registering routes
The routes register function have a minimum of 2 arguments, the path and callback. You can supply as many middleware functions as you like.
floaty.route('/', viewFrontpage);You can also use parameters which will be included in the context sent to the middlewares and callback.
floaty.route('/user/:id/edit', isUserLoggedIn, editUser);This will execute the isUserLoggedIn function first, then the editUser one, with a context containing the route object as well as a params which in this case looks like this: { "id": 1 } for the URL /user/1/edit.
Handling routes not found
If a path is navigated to and a route for that path is not defined, the notFound callback is called if set.
floaty.notFound(handleNotFoundRequests);Initializing the engine
After you have setup all routes and templates, run the init function to intercept all <a> clicks as well as render the template for the given browser location.
floaty.init();You can also supply options to the init function.
floaty.init({
// This will make the framework not
// terminate the route if an exception
// is thrown in one of the middleware
// functions.
continueOnExceptions: true
});