Add router to frontend

.jshintrc

@@ -28,7 +28,7 @@
   "maxdepth": 4,
   "maxerr": 50,
   "maxlen": 80,
-  "maxparams": 4,
+  "maxparams": 5,
 
   "indent": 2,
   "globals": {

assets/app/app.js

@@ -1,8 +1,10 @@
 define([
   'underscore',
+  'backbone',
   'marionette',
-  'core/layout/module'
+  'core/layout/module',
-], function AppDefine(_, Marionette, Layout) {
+  'core/router'
+], function AppDefine(_, Backbone, Marionette, Layout, Router) {
   'use strict';
 
   var Application = Marionette.Application;
@@ -15,15 +17,19 @@ define([
   }
 
   App.prototype = new Application();
+
   _.extend(App.prototype, {
     Layout: Layout,
 
     initialize: function initialize(config) {
       config = config || {};
-      if (config.Layout) {
+      this.Layout = config.Layout || this.Layout;
-        this.Layout = config.Layout;
-      }
       this.module('layout', this.Layout);
+
+      this.router = new Router();
+      this.listenTo(this.router.model, 'change:slide', function (model, num) {
+        this.triggerMethod('slide:change', num);
+      }, this);
     }
   });
 

assets/app/core/layout/module.js

@@ -10,7 +10,7 @@ define([
     Model: LayoutModel,
     View: LayoutView,
 
-    onStart: function(options) {
+    onStart: function onStart(options) {
       var opts = _.defaults({}, options || {}, {layout: {}});
       _.defaults(opts.layout, {view: {}, model: {}});
 

assets/app/core/model.js

@@ -0,0 +1,18 @@
+define([
+  'underscore',
+  'backbone',
+  'marionette'
+], function (_, Backbone, Marionette) {
+  var Obj = Marionette.Object;
+  var Model = Backbone.Model;
+
+  function BaseModel() {
+    Model.apply(this, arguments);
+  }
+
+  BaseModel.prototype = new Model();
+
+  _.extend(BaseModel.prototype, Obj.prototype);
+
+  return BaseModel;
+});

assets/app/core/router.js

@@ -0,0 +1,29 @@
+define(['underscore', 'backbone', 'core/model'], function (_, Backbone, Model) {
+  var Router = Backbone.Router;
+
+  function DeckRouter() {
+    Router.apply(this, arguments);
+  }
+
+  DeckRouter.prototype = new Router();
+
+  _.extend(DeckRouter.prototype, {
+    Model: Model,
+    model: null,
+
+    routes: {
+      'slide/:id': 'slide'
+    },
+
+    initialize: function initialize(config) {
+      config = config || {};
+      this.model = config.model || new this.Model();
+    },
+
+    slide: function slide(id) {
+      this.model.set('slide', parseInt(id, 10));
+    }
+  });
+
+  return DeckRouter;
+});

assets/app/main.js

@@ -1,10 +1,23 @@
-define('main', ['underscore', 'config', 'app'], function main(_, config, App) {
+define('main', [
+  'underscore',
+  'backbone',
+  'config',
+  'app'
+], function main(_, Backbone, config, App) {
   'use strict';
   requirejs.config(config());
   return function main(options) {
     var opts = _.defaults({}, options, {config: {}});
     var app = new App(opts);
+
+    app.on('start', function () {
+      if (!Backbone.history.start({pushState: true})) {
+        app.router.navigate('slide/1');
+      }
+    });
+
     app.start(opts.config);
+
     return app;
   };
 });

bin/deck

@@ -34,7 +34,7 @@ function pathToFile() {
   );
 }
 
-app.get('/', function index(req, res) {
+function index(req, res) {
   var indexFile = pathToFile('assets', 'index.html');
 
   function compileServe(err, text) {
@@ -47,7 +47,9 @@ app.get('/', function index(req, res) {
   }
 
   fs.readFile(indexFile, {encoding: 'utf8'}, compileServe);
-});
+}
+
+app.get('/', index);
 
 function serveIfExists(path) {
   return function _serveIfExists(cb) {
@@ -98,6 +100,11 @@ app.get('/slides', function showHandler(req, res) {
 });
 
 app.get(/slide\/(\d+)/, function showHandler(req, res, next) {
+  if (!req.xhr) {
+    index(req, res);
+    return;
+  }
+
   var slideId = req.params[0];
   var slidePath = pathToFile('data', 'slide', slideId + '.json');
 

test/app/app.js

@@ -1,4 +1,4 @@
-define(['marionette', 'app'], function (Marionette, App) {
+define(['backbone', 'marionette', 'app'], function (Backbone, Marionette, App) {
   describe('App', function () {
     it('→ exits', function () {
       expect(new App()).not.toBeUndefined();
@@ -18,5 +18,21 @@ define(['marionette', 'app'], function (Marionette, App) {
         expect(new App().layout).not.toBeUndefined();
       });
     });
+
+    describe('→ has router', function () {
+      it('→ exits', function () {
+        expect(new App().router).not.toBeUndefined();
+      });
+
+      describe('→ listens to events', function () {
+        it('→ exits', function () {
+          var app = new App();
+          app.onSlideChange = app.onSlideChange || function () {};
+          spyOn(app, 'onSlideChange');
+          app.router.model.set('slide', 123);
+          expect(app.onSlideChange).toHaveBeenCalledWith(123);
+        });
+      });
+    });
   });
 });

test/app/core/model.js

@@ -0,0 +1,13 @@
+define(['core/model'], function (Model) {
+  describe('Model', function () {
+    it('→ exits', function () {
+      expect(new Model()).not.toBeUndefined();
+    });
+
+    describe('→ triggerMethod', function () {
+      it('→ exits', function () {
+        expect((new Model()).triggerMethod).not.toBeUndefined();
+      });
+    });
+  });
+});

test/app/core/router.js

@@ -0,0 +1,26 @@
+define(['backbone', 'core/router'], function (Backbone, Router) {
+  describe('Router', function () {
+    it('→ exits', function () {
+      expect(new Router()).not.toBeUndefined();
+    });
+
+    describe('→ is passed model', function () {
+      it('→ exits', function () {
+        expect((new Router()).model).not.toBeUndefined();
+      });
+
+      it('→ same as passed in', function () {
+        var model = new Backbone.Model();
+        expect((new Router({model: model})).model).toBe(model);
+      });
+    });
+
+    describe('→ navigate changes model', function () {
+      it('→ goes to the number for page', function () {
+        var router = new Router();
+        router.slide('123');
+        expect(router.model.get('slide')).toBe(123);
+      });
+    });
+  });
+});