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**'));
+ });
+ });
+ });
+});