| // For any third party dependencies, like jQuery, place them in the lib folder | |
| requirejs.config({ | |
| baseUrl: 'lib', | |
| paths: { | |
| 'app': '../app' | |
| }, | |
| shim: { | |
| 'bootstrap': { | |
| deps: ['jquery'] | |
| } | |
| } | |
| }); | |
| // Start loading the main app file. Put all of | |
| // your application logic in there. | |
| requirejs(['bootstrap', 'main']); |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <link rel="stylesheet" href="style.css"> | |
| <script data-main="app" src="lib/require.js"></script> | |
| <script type="text/template" id="root-template"> | |
| <div id="header"></div> | |
| <div id="content"></div> | |
| </script> | |
| <script type="text/template" id="header-template"> | |
| <nav class="navbar navbar-template"> | |
| <ul class="nav navbar-nav"> | |
| <li><a href="#/">Home</a></li> | |
| <li><a href="#/map">Map</a></li> | |
| </ul> | |
| </nav> | |
| </script> | |
| <script type="text/template" id="map-template"> | |
| <div id="map"></div> | |
| </script> | |
| </head> | |
| <body> | |
| <div id='container'></div> | |
| </body> | |
| </html> |
| define(function (require) { | |
| 'use strict'; | |
| var _ = require('underscore'); | |
| var Bb = require('backbone'); | |
| var Mn = require('backbone.marionette'); | |
| var L = require('leaflet'); | |
| var HeaderView = Mn.View.extend({ | |
| template: '#header-template' | |
| }); | |
| var MapView = Mn.View.extend({ | |
| id: 'map', | |
| template: _.noop, | |
| onDomRefresh: function(){ | |
| L.map('map').setView([51.505, -0.09], 13); | |
| } | |
| }); | |
| var RootView = Mn.View.extend({ | |
| template: '#root-template', | |
| regions: { | |
| header: '#header', | |
| content: '#content', | |
| }, | |
| onRender: function(){ | |
| this.showChildView('header', new HeaderView()); | |
| }, | |
| }); | |
| var Controller = Mn.Object.extend({ | |
| initialize: function(){ | |
| this.rootView = this.getOption('rootView'); | |
| }, | |
| default: function(){ | |
| console.log('default route'); | |
| this.rootView.detachChildView('content'); | |
| }, | |
| showMap: function(){ | |
| this.rootView.showChildView('content', new MapView()); | |
| } | |
| }); | |
| var Router = Mn.AppRouter.extend({ | |
| initialize: function(){ | |
| var rootView = this.getOption('rootView'); | |
| this.controller = new Controller({ | |
| rootView: rootView | |
| }); | |
| }, | |
| appRoutes: { | |
| '': 'default', | |
| 'map': 'showMap' | |
| }, | |
| }); | |
| var App = Mn.Application.extend({ | |
| region: '#container', | |
| onBeforeStart: function(){ | |
| this.view = new RootView({ | |
| el: '#container' | |
| }); | |
| }, | |
| onStart: function(){ | |
| this.view.render(); | |
| new Router({ | |
| rootView: this.view | |
| }); | |
| Bb.history.start(); | |
| } | |
| }); | |
| var app = new App(); | |
| app.start(); | |
| }); |
| @import url("./css/bootstrap.min.css"); | |
| @import url("./css/bootstrap-theme.min.css"); | |
| @import url("./css/leaflet.css"); | |
| html, body, #container, #mapcontainer, #content, #map { | |
| height: 100%; | |
| width: 100%; | |
| overflow: hidden; | |
| } | |
| #map { | |
| width: auto; | |
| height: 100%; | |
| box-shadow: 0 0 10px rgba(0,0,0,0.5); | |
| } |