From 07b9f12fac817fd26913b6a836ac0c66f24d1004 Mon Sep 17 00:00:00 2001 From: Buddy Sandidge Date: Fri, 13 Feb 2015 16:12:27 -0800 Subject: [PATCH] Create layout module --- .jshintrc | 1 + assets/app/app.js | 21 ++++++++---------- assets/app/core/layout/model.js | 18 ++++++++++++++++ assets/app/core/layout/module.js | 26 +++++++++++++++++++++++ assets/app/{ => core/layout}/template.hbs | 0 assets/app/core/layout/view.js | 12 +++++++++++ assets/app/main.js | 7 +++--- assets/index.html | 2 +- config/test.js | 5 +++-- test/app/app.js | 6 ++++++ test/app/core/layout/model.js | 13 ++++++++++++ test/app/core/layout/module.js | 22 +++++++++++++++++++ test/app/core/layout/view.js | 7 ++++++ 13 files changed, 122 insertions(+), 18 deletions(-) create mode 100644 assets/app/core/layout/model.js create mode 100644 assets/app/core/layout/module.js rename assets/app/{ => core/layout}/template.hbs (100%) create mode 100644 assets/app/core/layout/view.js create mode 100644 test/app/core/layout/model.js create mode 100644 test/app/core/layout/module.js create mode 100644 test/app/core/layout/view.js diff --git a/.jshintrc b/.jshintrc index 507e813..cf5f27d 100644 --- a/.jshintrc +++ b/.jshintrc @@ -40,6 +40,7 @@ "module": true, "require": true, "requirejs": true, + "spyOn": true, "xdescribe": true, "xit": true } diff --git a/assets/app/app.js b/assets/app/app.js index 02d6988..2d2800d 100644 --- a/assets/app/app.js +++ b/assets/app/app.js @@ -1,25 +1,22 @@ define([ 'marionette', - 'jquery', - 'template' -], function AppDefine(Marionette, $, tmpl) { + 'core/layout/module' +], function AppDefine(Marionette, Layout) { 'use strict'; var Application = Marionette.Application; - function App() { + function App(options) { + if (options == null) { + options = {}; + } Application.apply(this, arguments); } + App.prototype = new Application(); - App.prototype.onStart = function onStart(options) { - if (options == null) { - options = {}; - } - if (options.el == null) { - options.el = 'body'; - } - $(options.el).html(tmpl({title: 'started'})); + App.prototype.initialize = function initialize() { + this.module('layout', Layout); }; return App; diff --git a/assets/app/core/layout/model.js b/assets/app/core/layout/model.js new file mode 100644 index 0000000..7cad8ff --- /dev/null +++ b/assets/app/core/layout/model.js @@ -0,0 +1,18 @@ +define(['backbone'], function LayoutModelDefine(Backbone) { + 'use strict'; + + var Model = Backbone.Model; + + function LayoutModel() { + Model.apply(this, arguments); + } + LayoutModel.prototype = new Model(); + + LayoutModel.prototype.defaults = function defaults() { + return { + title: 'some title' + }; + }; + + return LayoutModel; +}); diff --git a/assets/app/core/layout/module.js b/assets/app/core/layout/module.js new file mode 100644 index 0000000..8c14a35 --- /dev/null +++ b/assets/app/core/layout/module.js @@ -0,0 +1,26 @@ +define([ + 'underscore', + 'marionette', + 'core/layout/view', + 'core/layout/model' +], function LayoutModuleDefine(_, Marionette, LayoutView, LayoutModel) { + 'use strict'; + + var LayoutModule = Marionette.Module.extend({ + Model: LayoutModel, + View: LayoutView, + + onStart: function(options) { + var opts = _.defaults({}, options || {}, {layout: {}}); + _.defaults(opts.layout, {view: {}, model: {}}); + + var config = opts.layout; + this.model = new this.Model(config.model); + config.view.model = this.model; + this.view = new this.View(config.view); + this.view.render(); + } + }); + + return LayoutModule; +}); diff --git a/assets/app/template.hbs b/assets/app/core/layout/template.hbs similarity index 100% rename from assets/app/template.hbs rename to assets/app/core/layout/template.hbs diff --git a/assets/app/core/layout/view.js b/assets/app/core/layout/view.js new file mode 100644 index 0000000..b6dc384 --- /dev/null +++ b/assets/app/core/layout/view.js @@ -0,0 +1,12 @@ +define([ + 'marionette', + 'core/layout/template' +], function CoreLayoutDefine(Marionette, template) { + 'use strict'; + + var CoreLayout = Marionette.LayoutView.extend({ + template: template + }); + + return CoreLayout; +}); diff --git a/assets/app/main.js b/assets/app/main.js index 30d81cc..d06f467 100644 --- a/assets/app/main.js +++ b/assets/app/main.js @@ -1,9 +1,10 @@ -define('main', ['config', 'app'], function main(config, App) { +define('main', ['underscore', 'config', 'app'], function main(_, config, App) { 'use strict'; requirejs.config(config()); return function main(options) { - var app = new App(); - app.start(options); + var opts = _.defaults({}, options, {config: {}}); + var app = new App(opts); + app.start(opts.config); return app; }; }); diff --git a/assets/index.html b/assets/index.html index 87d4d43..b098d9f 100644 --- a/assets/index.html +++ b/assets/index.html @@ -15,7 +15,7 @@ diff --git a/config/test.js b/config/test.js index 49f2882..ac6445a 100644 --- a/config/test.js +++ b/config/test.js @@ -15,8 +15,9 @@ module.exports = function(config) { {pattern: 'test/**/!(test-main).js', included: false}, {pattern: 'static/**/!(config).js', included: false}, {pattern: 'static/**/*.map', included: false}, - {pattern: 'static/app/config.js', included: true}, - {pattern: 'test/test-main.js', included: true} + 'static/style/main.css', + 'static/app/config.js', + 'test/test-main.js' ], // list of files to exclude diff --git a/test/app/app.js b/test/app/app.js index ca1c825..31f39dc 100644 --- a/test/app/app.js +++ b/test/app/app.js @@ -11,5 +11,11 @@ define(['app'], function (App) { }).not.toThrow(); }); }); + + describe('→ has layout', function () { + it('→ exits', function () { + expect(new App().layout).not.toBeUndefined(); + }); + }); }); }); diff --git a/test/app/core/layout/model.js b/test/app/core/layout/model.js new file mode 100644 index 0000000..1e658d5 --- /dev/null +++ b/test/app/core/layout/model.js @@ -0,0 +1,13 @@ +define(['core/layout/model'], function (LayoutModel) { + describe('LayoutModel', function () { + it('→ exits', function () { + expect(new LayoutModel()).not.toBeUndefined(); + }); + + describe('→ has defaults', function () { + it('→ title', function () { + expect(typeof (new LayoutModel()).get('title')).toBe('string'); + }); + }); + }); +}); diff --git a/test/app/core/layout/module.js b/test/app/core/layout/module.js new file mode 100644 index 0000000..5df8fb6 --- /dev/null +++ b/test/app/core/layout/module.js @@ -0,0 +1,22 @@ +define([ + 'marionette', + 'core/layout/module' +], function (Marionette, LayoutModule) { + describe('LayoutModule', function () { + it('→ exits', function () { + var app = new Marionette.Application(); + var module = new LayoutModule('layout', app, {}); + expect(module).not.toBeUndefined(); + }); + + describe('→ onStart', function () { + it('→ will render view', function () { + var app = new Marionette.Application(); + var module = new LayoutModule('layout', app, {}); + spyOn(module.View.prototype, 'render'); + module.onStart(); + expect(module.View.prototype.render).toHaveBeenCalled(); + }); + }); + }); +}); diff --git a/test/app/core/layout/view.js b/test/app/core/layout/view.js new file mode 100644 index 0000000..996a539 --- /dev/null +++ b/test/app/core/layout/view.js @@ -0,0 +1,7 @@ +define(['core/layout/view'], function (LayoutView) { + describe('→ LayoutView', function () { + it('→ exists', function () { + expect(new LayoutView()).not.toBeUndefined(); + }); + }); +});