Create layout module

.jshintrc

@@ -40,6 +40,7 @@
     "module": true,
     "require": true,
     "requirejs": true,
+    "spyOn": true,
     "xdescribe": true,
     "xit": true
   }

assets/app/app.js

@@ -1,25 +1,22 @@
 define([
   'marionette',
-  'jquery',
+  'core/layout/module'
-  'template'
+], function AppDefine(Marionette, Layout) {
-], function AppDefine(Marionette, $, tmpl) {
   'use strict';
 
   var Application = Marionette.Application;
 
-  function App() {
+  function App(options) {
-    Application.apply(this, arguments);
-  }
-  App.prototype = new Application();
-
-  App.prototype.onStart = function onStart(options) {
     if (options == null) {
       options = {};
     }
-    if (options.el == null) {
+    Application.apply(this, arguments);
-      options.el = 'body';
   }
-    $(options.el).html(tmpl({title: 'started'}));
+
+  App.prototype = new Application();
+
+  App.prototype.initialize = function initialize() {
+    this.module('layout', Layout);
   };
 
   return App;

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

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

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

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();
+    var opts = _.defaults({}, options, {config: {}});
-    app.start(options);
+    var app = new App(opts);
+    app.start(opts.config);
     return app;
   };
 });

assets/index.html

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

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},
+      'static/style/main.css',
-      {pattern: 'test/test-main.js', included: true}
+      'static/app/config.js',
+      'test/test-main.js'
     ],
 
     // list of files to exclude

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

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

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

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