Add slide widget, view and model

.jshintrc

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

assets/app/app.js

@@ -2,9 +2,17 @@ define([
   'underscore',
   'backbone',
   'marionette',
-  'core/layout/module',
+  'core/router',
-  'core/router'
+  'widgets/slide/view',
-], function AppDefine(_, Backbone, Marionette, Layout, Router) {
+  'widgets/slide/model'
+], function AppDefine(
+  _,
+  Backbone,
+  Marionette,
+  Router,
+  SlideView,
+  SlideModel
+) {
   'use strict';
 
   var Application = Marionette.Application;
@@ -19,17 +27,25 @@ define([
   App.prototype = new Application();
 
   _.extend(App.prototype, {
-    Layout: Layout,
+    initialize: function initialize(options) {
+      options = options || {};
 
-    initialize: function initialize(config) {
+      this.model = new SlideModel();
-      config = config || {};
+      this.view = new SlideView({el: options.el, model: this.model});
-      this.Layout = config.Layout || this.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);
+    },
+
+    onStart: function onStart() {
+      this.view.render();
+    },
+
+    onSlideChange: function onSlideChange(num) {
+      this.model.set('id', num);
+      this.model.fetch();
     }
   });
 

assets/app/widgets/slide/model.js

@@ -0,0 +1,23 @@
+define(['underscore', 'backbone'], function SlideModelDefine(_, Backbone) {
+  'use strict';
+  var Model = Backbone.Model;
+
+  function SlideModel() {
+    Model.apply(this, arguments);
+  }
+
+  SlideModel.prototype = new Model();
+
+  _.extend(SlideModel.prototype, {
+    url: function url() {
+      var id = this.get('id');
+      if (id < 10) {
+        return '/slide/0' + id;
+      } else {
+        return '/slide/' + id;
+      }
+    }
+  });
+
+  return SlideModel;
+});

assets/app/widgets/slide/template.hbs

@@ -0,0 +1,4 @@
+<div class="copy"></div>
+<code code="language-javascript"><pre class="language-javascript">
+{{code}}
+</pre></code>

assets/app/widgets/slide/view.js

@@ -0,0 +1,30 @@
+define([
+  'underscore',
+  'marionette',
+  'lib/markdown',
+  'widgets/slide/template'
+], function AppSlideWidget(_, Marionette, markdown, template) {
+  'use strict';
+
+  var SlideView = Marionette.ItemView.extend({
+    template: template,
+
+    ui: {
+      copy: '.copy',
+      code: 'pre.language-javascript'
+    },
+
+    modelEvents: {
+      change: 'render'
+    },
+
+    onRender: function onRender() {
+      var copy = this.model.get('copy');
+      if (copy) {
+        this.ui.copy.html(markdown(copy));
+      }
+    }
+  });
+
+  return SlideView;
+});

assets/index.html

@@ -15,7 +15,7 @@
   <script>
   (function (global) {
     require(['main'], function _main(main) {
-      global.app = main({config: {layout: {view: {el: '#deck'}}}});
+      global.app = main({el: '#deck'});
     });
   }(this));
   </script>

test/app/app.js

@@ -7,15 +7,15 @@ define(['backbone', 'marionette', 'app'], function (Backbone, Marionette, App) {
     describe('→ start()', function () {
       it('→ can be called', function () {
         expect(function noError() {
-          var app = new App({Layout: Marionette.Module});
+          var app = new App();
           app.start();
         }).not.toThrow();
       });
     });
 
-    describe('→ has layout', function () {
+    describe('→ has view', function () {
       it('→ exits', function () {
-        expect(new App().layout).not.toBeUndefined();
+        expect(new App().view).not.toBeUndefined();
       });
     });
 

test/app/widgets/slide/model.js

@@ -0,0 +1,17 @@
+define(['widgets/slide/model'], function (SlideModel) {
+  describe('SlideModel', function () {
+    it('→ exits', function () {
+      expect(new SlideModel()).not.toBeUndefined();
+    });
+
+    describe('→ url', function () {
+      it('→ with slide id 1', function () {
+        expect((new SlideModel({id: 1})).url()).toBe('/slide/01');
+      });
+
+      it('→ with slide id 10', function () {
+        expect((new SlideModel({id: 10})).url()).toBe('/slide/10');
+      });
+    });
+  });
+});

test/app/widgets/slide/view.js

@@ -0,0 +1,22 @@
+define([
+  'backbone',
+  'lib/markdown',
+  'widgets/slide/view'
+], function (Backbone, markdown, SlideView) {
+  var Model = Backbone.Model;
+
+  describe('SlideView', function () {
+    it('→ exits', function () {
+      expect(new SlideView()).not.toBeUndefined();
+    });
+
+    describe('→ onRender', function () {
+      it('→ renders', function () {
+        var model = new Model({'copy': '**hello**'});
+        var view = new SlideView({model: model});
+        view.render();
+        expect(view.ui.copy.html()).toBe(markdown('**hello**'));
+      });
+    });
+  });
+});