diff --git a/.jshintrc b/.jshintrc index 96c7d88..ceddfa7 100644 --- a/.jshintrc +++ b/.jshintrc @@ -28,7 +28,6 @@ "maxdepth": 4, "maxerr": 50, "maxlen": 80, - "maxparams": 5, "indent": 2, "globals": { diff --git a/assets/app/app.js b/assets/app/app.js index 60f7025..3c320b8 100644 --- a/assets/app/app.js +++ b/assets/app/app.js @@ -2,9 +2,17 @@ define([ 'underscore', 'backbone', 'marionette', - 'core/layout/module', - 'core/router' -], function AppDefine(_, Backbone, Marionette, Layout, Router) { + 'core/router', + 'widgets/slide/view', + '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) { - config = config || {}; - this.Layout = config.Layout || this.Layout; - this.module('layout', this.Layout); + this.model = new SlideModel(); + this.view = new SlideView({el: options.el, model: this.model}); 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(); } }); diff --git a/assets/app/widgets/slide/model.js b/assets/app/widgets/slide/model.js new file mode 100644 index 0000000..3ede25a --- /dev/null +++ b/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; +}); diff --git a/assets/app/widgets/slide/template.hbs b/assets/app/widgets/slide/template.hbs new file mode 100644 index 0000000..6f6dd15 --- /dev/null +++ b/assets/app/widgets/slide/template.hbs @@ -0,0 +1,4 @@ +
+
+{{code}}
+
diff --git a/assets/app/widgets/slide/view.js b/assets/app/widgets/slide/view.js new file mode 100644 index 0000000..a200171 --- /dev/null +++ b/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; +}); diff --git a/assets/index.html b/assets/index.html index 3f4ac2b..393f461 100644 --- a/assets/index.html +++ b/assets/index.html @@ -15,7 +15,7 @@ diff --git a/test/app/app.js b/test/app/app.js index 78afe57..42555bf 100644 --- a/test/app/app.js +++ b/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(); }); }); diff --git a/test/app/widgets/slide/model.js b/test/app/widgets/slide/model.js new file mode 100644 index 0000000..c772cb5 --- /dev/null +++ b/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'); + }); + }); + }); +}); diff --git a/test/app/widgets/slide/view.js b/test/app/widgets/slide/view.js new file mode 100644 index 0000000..629f53d --- /dev/null +++ b/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**')); + }); + }); + }); +});