Add ability to go between pages

.jshintrc

@@ -21,6 +21,7 @@
   "undef": true,
   "unused": true,
 
+  "browser": true,
   "eqnull": true,
   "debug": true,
 

assets/app/app.js

@@ -2,6 +2,7 @@ define([
   'underscore',
   'backbone',
   'marionette',
+  'core/listener',
   'core/router',
   'widgets/slide/view',
   'widgets/slide/model'
@@ -9,6 +10,7 @@ define([
   _,
   Backbone,
   Marionette,
+  Listener,
   Router,
   SlideView,
   SlideModel
@@ -16,6 +18,9 @@ define([
   'use strict';
 
   var Application = Marionette.Application;
+  var SlideCollection = Backbone.Collection.extend({
+    url: '/slides'
+  });
 
   function App(options) {
     if (options == null) {
@@ -30,6 +35,10 @@ define([
     initialize: function initialize(options) {
       options = options || {};
 
+      this.collection = new SlideCollection();
+
+      this.module('listener', Listener);
+
       this.model = new SlideModel();
       this.view = new SlideView({el: options.el, model: this.model});
 
@@ -39,8 +48,23 @@ define([
       }, this);
     },
 
+    nextSlide: function nextSlide() {
+      var nextId = this.model.get('id') + 1;
+      if (this.collection.get(nextId)) {
+        this.triggerMethod('slide:change', nextId);
+      }
+    },
+
+    prevSlide: function prevSlide() {
+      var nextId = this.model.get('id') - 1;
+      if (this.collection.get(nextId)) {
+        this.triggerMethod('slide:change', nextId);
+      }
+    },
+
     onStart: function onStart() {
       this.view.render();
+      this.collection.fetch();
     },
 
     onSlideChange: function onSlideChange(num) {

assets/app/core/listener.js

@@ -0,0 +1,34 @@
+define([
+  'jquery',
+  'underscore',
+  'marionette'
+], function ListenerDefine($, _, Marionette) {
+  'use strict';
+
+  var spaceCode = 32;
+  var leftArrowCode = 37;
+  var rightArrowCode = 39;
+
+  var ListenerModule = Marionette.Module.extend({
+    initialize: function initialize() {
+      this._nextCodes = [spaceCode, rightArrowCode];
+      this._prevCodes = [leftArrowCode];
+    },
+
+    onStart: function onStart(options) {
+      options = options || {};
+      this.$el = $(options.el || document);
+      this.$el.on('keyup', _.bind(this.onKeyUp, this));
+    },
+
+    onKeyUp: function onKeyUp(event) {
+      if (_.contains(this._nextCodes, event.which)) {
+        this.app.nextSlide();
+      } else if (_.contains(this._prevCodes, event.which)) {
+        this.app.prevSlide();
+      }
+    }
+  });
+
+  return ListenerModule;
+});

assets/app/main.js

@@ -12,7 +12,7 @@ define('main', [
 
     app.on('start', function () {
       if (!Backbone.history.start({pushState: true})) {
-        app.router.navigate('slide/1');
+        app.router.navigate('slide/1', {trigger: true});
       }
     });
 

bin/deck

@@ -67,35 +67,14 @@ app.get('/slides', function showHandler(req, res) {
   fs.readdir(pathToFile('data', 'slide'), function (err, files) {
     files.sort();
     var jsonFiles = _.filter(files, function (file) {
-      return /^\d+.json$/.test(file);
+      return /^\d+\.json$/.test(file);
     });
 
-    var getJsonFiles = _.map(jsonFiles, function (file) {
+    res.send(_.map(jsonFiles, function (file) {
-      return function (cb) {
+      return {
-        var serve = serveIfExists(pathToFile('data', 'slide', file));
+        id: parseInt(file.replace(/\.json$/, ''), 10)
-        serve(function (err, content) {
-          if (err) {
-            cb(err, null);
-            return;
-          }
-          try {
-            var json = JSON.parse(content);
-          } catch (err) {
-            cb(err, null);
-            return;
-          }
-          cb(null, json);
-        });
       };
-    });
+    }));
-
-    async.parallel(getJsonFiles, function (err, slideContent) {
-      if (err) {
-        renderError(res, err);
-        return;
-      }
-      res.send(slideContent);
-    });
   });
 });