Merge pull request #42 from mulderp/movies_example

Movies example
GeppettoJS · Jan 18, 2014 · 9e3450a · 9e3450a
2 parents 3ed4bf8 + 156ae35
commit 9e3450a
Show file tree

Hide file tree

Showing 22 changed files with 589 additions and 1 deletion.
diff --git a/bower.json b/bower.json
@@ -19,6 +19,8 @@
     "blanket": "~1.1.5",
     "sinon.js": "~1.7.3",
     "sinonjs": "~1.7.3",
-    "marionette": "~1.4.1"
+    "marionette": "~1.4.1",
+    "handlebars": "1.3.0",
+    "jquery-mockjax": "1.5.3"
   }
 }
diff --git a/examples/movies/css/style.css b/examples/movies/css/style.css
@@ -0,0 +1,9 @@
+body{
+  padding:10px;
+}
+
+.filters-section,
+.sort-section,
+.content-section{
+  padding:5px;
+}
diff --git a/examples/movies/img/spinner.gif b/examples/movies/img/spinner.gif
diff --git a/examples/movies/index.html b/examples/movies/index.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
+<!--[if lt IE 7]>
+<html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
+<!--[if IE 7]>
+<html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
+<!--[if IE 8]>
+<html class="no-js lt-ie9" lang="en"> <![endif]-->
+<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
+<!--[if gt IE 8]><!-->
+<html class="no-js" lang="en"> <!--<![endif]-->
+<head>
+    <meta charset="utf-8">
+
+    <!-- Use the .htaccess and remove these lines to avoid edge case issues.
+ More info: h5bp.com/i/378 -->
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+
+    <title></title>
+    <meta name="description" content="">
+
+    <!-- Mobile viewport optimized: h5bp.com/viewport -->
+    <meta name="viewport" content="width=device-width">
+
+    <!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->
+
+     <script src="http://code.jquery.com/jquery.min.js"></script>
+     <link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
+     <link rel="stylesheet" href="css/style.css">
+
+</head>
+<body>
+<!-- Prompt IE 6 users to install Chrome Frame. Remove this if you support IE 6.
+chromium.org/developers/how-tos/chrome-frame-getting-started -->
+<!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a
+    different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a>
+    to experience this site.</p><![endif]-->
+<header>
+
+</header>
+<div role="main">
+
+    <div id="loadingSpinner">
+        <img src="img/spinner.gif"/>
+    </div>
+
+</div>
+<footer>
+
+</footer>
+
+<script data-main="js/main" src="../../../bower_components/requirejs/require.js"></script>
+
+</body>
+</html>
diff --git a/examples/movies/js/appContext.js b/examples/movies/js/appContext.js
@@ -0,0 +1,22 @@
+define([
+  'backbone',
+  'geppetto',
+  'commands/loadMovies',
+  'commands/loadGenres',
+  'commands/sortMovies',
+  'commands/filterMovies'
+  ], function(Backbone, Geppetto, LoadMoviesCommand, LoadGenresCommand, SortMoviesCommand, FilterMoviesCommand) {
+
+   ApplicationContext = Backbone.Geppetto.Context.extend({
+           initialize: function () {
+                this.wireCommand( "LoadMoviesEvent", LoadMoviesCommand );
+                this.wireCommand( "LoadGenresEvent", LoadGenresCommand );
+                this.wireCommand( "SortMovieList",   SortMoviesCommand );
+                this.wireCommand("FilterMovieList",  FilterMoviesCommand);
+
+           }
+   });
+
+   return ApplicationContext;
+
+});
diff --git a/examples/movies/js/collections/genres.js b/examples/movies/js/collections/genres.js
@@ -0,0 +1,10 @@
+define([
+  'backbone'
+], function(Backbone) {
+
+      return Backbone.Collection.extend({
+        url: '/api/genres'
+      });
+
+});
+
diff --git a/examples/movies/js/collections/movies.js b/examples/movies/js/collections/movies.js
@@ -0,0 +1,10 @@
+define([
+  'backbone',
+], function(Backbone) {
+
+      return Backbone.Collection.extend({
+        url: '/api/movies'
+      });
+
+});
+
diff --git a/examples/movies/js/commands/filterMovies.js b/examples/movies/js/commands/filterMovies.js
@@ -0,0 +1,25 @@
+define([
+  'backbone'
+  ], function(Backbone) {
+
+    var FilterMoviesCommand = function(){};
+
+    FilterMoviesCommand.prototype.execute = function(){
+
+      var filterBy = this.eventData.filterBy;
+
+      var filteredMovies = _.filter(this.context.movies.toJSON(),function(movie){
+        return _.contains(movie.genres, filterBy);
+      });
+
+      var filteredMoviesModel = new Backbone.Model({
+        movies : filteredMovies
+      });
+
+      this.context.dispatch("ReloadMoviesEvent",{data:filteredMoviesModel});
+
+    };
+
+    return FilterMoviesCommand;
+
+});
diff --git a/examples/movies/js/commands/loadGenres.js b/examples/movies/js/commands/loadGenres.js
@@ -0,0 +1,20 @@
+define([
+  'backbone',
+  'collections/genres'
+], function(Backbone, Genres) {
+
+     var LoadGenresCommand  = function(){};
+     LoadGenresCommand.prototype.execute = function(){
+       this.context.genres = new Genres()
+
+       var that = this;
+       this.context.genres.fetch({success: function(results) {
+           that.context.dispatch('onGenresLoaded', { data : results});
+         }
+       });
+     };
+
+     return LoadGenresCommand
+
+});
+
diff --git a/examples/movies/js/commands/loadMovies.js b/examples/movies/js/commands/loadMovies.js
@@ -0,0 +1,22 @@
+define(['backbone',
+        'collections/movies',
+        'mock'
+], function(Backbone, Movies, Mock) {
+
+    var LoadMoviesCommand  = function(){};
+
+    Mock.start();
+
+    LoadMoviesCommand.prototype.execute = function(){
+      this.context.movies = new Movies();
+
+      var that = this;
+      this.context.movies.fetch({success: function(movies) {
+          that.context.dispatch('onMoviesLoaded', {data : movies});  
+        }
+      });
+    };
+
+    return LoadMoviesCommand;
+});
+
diff --git a/examples/movies/js/commands/sortMovies.js b/examples/movies/js/commands/sortMovies.js
@@ -0,0 +1,20 @@
+define(['backbone'
+], function(Backbone) {
+
+    var SortMoviesCommand = function(){};
+
+    SortMoviesCommand.prototype.execute = function(){
+      var sortBy = this.eventData.sortBy;
+      this.context.movies.comparator = sortBy;
+      this.context.movies.sort();
+      var sortedMoviesModel = new Backbone.Model({
+           movies : this.context.movies.toJSON()
+      });  
+
+      this.context.dispatch("ReloadMoviesEvent",{data:sortedMoviesModel});
+    };
+
+    return SortMoviesCommand;
+
+});
+
diff --git a/examples/movies/js/main.js b/examples/movies/js/main.js
@@ -0,0 +1,57 @@
+"use strict";
+
+require.config( {
+    paths:{
+        jquery: '../../../bower_components/jquery/jquery',
+        underscore: '../../../bower_components/underscore/underscore',
+        backbone: '../../../bower_components/backbone/backbone',
+        geppetto: '../../../backbone.geppetto',
+        handlebars: '../../../bower_components/handlebars/handlebars',
+        mockjax: '../../../bower_components/jquery-mockjax/jquery.mockjax',
+        text: '../../../bower_components/requirejs-text/text'
+    },
+	shim: {
+		underscore: {
+			exports: '_'
+		},
+		backbone: {
+			deps: ['underscore', 'jquery'],
+			exports: 'Backbone'
+        },
+        handlebars: {
+           exports: 'Handlebars'
+        },
+        mockjax: {
+           deps: ['jquery'],
+           exports: 'Mockjax'
+        }
+	}
+} );
+
+require(
+        [
+            // external libraries with AMD support
+
+            "jquery",
+            "underscore",
+            "backbone",
+            "geppetto",
+            "views/containerView"
+
+        ], function ( $, _, Backbone, Geppetto, ContainerView ) {
+
+            $( function () {
+
+                $( "#loadingSpinner" ).hide();
+
+                // expose context map as public property so that 
+                // we can monitor the number of contexts and events
+                Geppetto.setDebug(true);
+
+                var mainView = new ContainerView();
+                mainView.render();
+                mainView.$el.appendTo('body');
+
+            } );
+        }
+);
diff --git a/examples/movies/js/mock.js b/examples/movies/js/mock.js
@@ -0,0 +1,67 @@
+define([
+  'jquery',
+  'mockjax'
+  ], function($) {
+	'use strict';
+
+    var movies = [{
+       image : 'http://placekitten.com/g/800/600',
+       title: 'The Avengers',
+       rating: 3,
+       genres:['Action','Adventure','Thriller','Sci-Fi']
+     },
+     {
+       image : 'http://placekitten.com/800/600',
+       title: 'Avatar',
+       rating: 5,
+       genres:['Action','Sci-Fi']
+     },
+     {
+       image : 'http://placekitten.com/g/800/600',
+       title: 'Whatever Works',
+       rating: 4,
+       genres:['Comedy']
+    }];
+
+    var genres = [
+          {
+            title:'Action',
+            count:2
+          },{
+            title:'Adventure',
+            count:1
+          },{
+            title:'Thriller',
+            count:1
+          },{
+            title:'Sci-Fi',
+            count:2
+          },{
+            title:'Comedy',
+            count:1
+          }
+    ];
+
+	var mock = function() {
+
+        $.ajaxSetup({
+          dataType: 'json'
+        });
+
+        $.mockjax({
+           url: '/api/movies',
+           dataType: 'json',
+           responseText: JSON.stringify(movies)
+        });
+
+        $.mockjax({
+           url: '/api/genres',
+           dataType: 'json',
+           responseText: JSON.stringify(genres)
+        });
+      };
+
+    return {
+      start: mock
+    };
+});
diff --git a/examples/movies/js/src/my-app.js b/examples/movies/js/src/my-app.js
@@ -0,0 +1,31 @@
+define( [
+    "jquery",
+    "underscore",
+    "backbone",
+    "geppetto",
+    "src/container/widget-container"
+], function ( $, _, Backbone, Geppetto, WidgetContainer ) {
+
+
+    Backbone.Marionette.TemplateCache.prototype.loadTemplate = function(templateId) {
+        // Marionette expects "templateId" to be the ID of a DOM element.
+        // But with RequireJS, templateId is actually the full text of the template.
+        var template = templateId;
+
+        // Make sure we have a template before trying to compile it
+        if (!template || template.length === 0){
+            var msg = "Could not find template: '" + templateId + "'";
+            var err = new Error(msg);
+            err.name = "NoTemplateError";
+            throw err;
+        }
+
+        return template;
+    };
+
+    var app = new WidgetContainer( {
+        el:"body"
+    } );
+
+    return app;
+} );
diff --git a/examples/movies/js/templates/containerView.hbs b/examples/movies/js/templates/containerView.hbs
@@ -0,0 +1,7 @@
+<div class="col-md-3"></div>
+<div class="col-md-9 filters-section">
+  <span>Filter by: </span>
+</div>
+<div class="col-md-3 sort-section">      
+</div>
+<div class="col-md-9 content-section"></div>
diff --git a/examples/movies/js/templates/filterList.hbs b/examples/movies/js/templates/filterList.hbs
@@ -0,0 +1,3 @@
+{{#each genres}}
+  <li><a href="#" data-name="{{title}}">{{title}}<span class="badge">{{count}}</span></a></li>
+{{/each}}