much smarter handling of series collection rendering.

UI/AddSeries/AddSeriesView.js

@@ -1,4 +1,4 @@
-'use strict';
+'use strict';
 define(
     [
         'marionette',

UI/AddSeries/Existing/CompositeView.js

@@ -49,8 +49,8 @@ define(
                 this.searchCollection = new AddSeriesCollection();
 
                 this.searchCollection.fetch({
-                    data   : { term: this.ui.searchText.val() },
+                    data: { term: this.ui.searchText.val() }
-                    success: function () {
+                }).done(function () {
                         icon.removeClass('icon-spin icon-spinner disabled').addClass('icon-search');
                         deferred.resolve();
                         self.collection.add(self.searchCollection.shift());
@@ -59,12 +59,10 @@ define(
                             self._showAll();
                         }
 
-                    },
+                    }).fail(function () {
-                    fail   : function () {
                         icon.removeClass('icon-spin icon-spinner disabled').addClass('icon-search');
                         deferred.reject();
-                    }
+                    });
-                });
 
                 return deferred.promise();
             },

UI/AddSeries/SearchResultView.js

@@ -73,9 +73,11 @@ define(
 
                 var self = this;
 
-                this.model.save(undefined, {
+                SeriesCollection.add(this.model);
-                    url    : SeriesCollection.prototype.url,
+
-                    success: function () {
+
+                this.model.save()
+                    .done(function () {
                         self.close();
                         icon.removeClass('icon-spin icon-spinner disabled').addClass('icon-search');
                         Messenger.show({
@@ -83,12 +85,10 @@ define(
                         });
 
                         App.vent.trigger(App.Events.SeriesAdded, { series: self.model });
-                        self.model.collection.remove(self.model);
+                    })
-                    },
+                    .fail(function () {
-                    fail   : function () {
                         icon.removeClass('icon-spin icon-spinner disabled').addClass('icon-search');
-                    }
+                    });
-                });
             },
 
             serializeData: function () {

UI/Content/icons.less

@@ -3,46 +3,46 @@
 
 /* Icon rotations and mirroring */
 .icon-rotate-90() {
-  -webkit-transform: rotate(90deg);
+  -webkit-transform : rotate(90deg);
-  -moz-transform: rotate(90deg);
+  -moz-transform    : rotate(90deg);
-  -ms-transform: rotate(90deg);
+  -ms-transform     : rotate(90deg);
-  -o-transform: rotate(90deg);
+  -o-transform      : rotate(90deg);
-  transform: rotate(90deg);
+  transform         : rotate(90deg);
-  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
+  filter            : progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
 }
 
 .icon-rotate-180() {
-  -webkit-transform: rotate(180deg);
+  -webkit-transform : rotate(180deg);
-  -moz-transform: rotate(180deg);
+  -moz-transform    : rotate(180deg);
-  -ms-transform: rotate(180deg);
+  -ms-transform     : rotate(180deg);
-  -o-transform: rotate(180deg);
+  -o-transform      : rotate(180deg);
-  transform: rotate(180deg);
+  transform         : rotate(180deg);
-  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+  filter            : progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
 }
 
 .icon-rotate-270() {
-  -webkit-transform: rotate(270deg);
+  -webkit-transform : rotate(270deg);
-  -moz-transform: rotate(270deg);
+  -moz-transform    : rotate(270deg);
-  -ms-transform: rotate(270deg);
+  -ms-transform     : rotate(270deg);
-  -o-transform: rotate(270deg);
+  -o-transform      : rotate(270deg);
-  transform: rotate(270deg);
+  transform         : rotate(270deg);
-  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+  filter            : progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
 }
 
 .icon-flip-horizontal() {
-  -webkit-transform: scale(-1, 1);
+  -webkit-transform : scale(-1, 1);
-  -moz-transform: scale(-1, 1);
+  -moz-transform    : scale(-1, 1);
-  -ms-transform: scale(-1, 1);
+  -ms-transform     : scale(-1, 1);
-  -o-transform: scale(-1, 1);
+  -o-transform      : scale(-1, 1);
-  transform: scale(-1, 1);
+  transform         : scale(-1, 1);
 }
 
 .icon-flip-vertical() {
-  -webkit-transform: scale(1, -1);
+  -webkit-transform : scale(1, -1);
-  -moz-transform: scale(1, -1);
+  -moz-transform    : scale(1, -1);
-  -ms-transform: scale(1, -1);
+  -ms-transform     : scale(1, -1);
-  -o-transform: scale(1, -1);
+  -o-transform      : scale(1, -1);
-  transform: scale(1, -1);
+  transform         : scale(1, -1);
 }
 
 .icon-nd-edit:before {
@@ -51,5 +51,9 @@
 
 .icon-nd-delete:before {
   .icon(@remove);
-  color: @errorText;
+  color : @errorText;
+}
+
+.icon-nd-add:before {
+  .icon(@plus);
 }

UI/Controller.js

@@ -1,4 +1,4 @@
-'use strict';
+'use strict';
 define(
     [
         'app',

UI/Series/Index/EmptyTemplate.html

@@ -1,4 +1,12 @@
-<div class="well span11">
+<div class="row">
-    <i class="icon-comment"/>
+    <div class="well span11">
-     You must be new around here, You should add some series.
+        <i class="icon-comment"/>
+        You must be new around here, You should add some series.
+    </div>
+</div>
+<div class="row span3 offset4">
+    <a href="/addseries" class='btn btn-large btn-block btn-success x-add-series'>
+        <i class='icon-nd-add'></i>
+        Add Series
+    </a>
 </div>

UI/Series/Index/EmptyView.js

@@ -1,4 +1,5 @@
-'use strict';
+
+'use strict';
 
 define(
     [

UI/Series/Index/Posters/CollectionView.js

@@ -1,4 +1,4 @@
-'use strict';
+'use strict';
 
 define(
     [

UI/Series/Index/SeriesIndexLayout.js

@@ -12,16 +12,15 @@ define(
         'Series/Index/Table/SeriesStatusCell',
         'Series/Index/Table/Row',
         'Shared/Toolbar/ToolbarLayout',
-        'Config',
         'Shared/LoadingView'
     ], function (Marionette, PosterCollectionView, ListCollectionView, EmptyView, SeriesCollection, AirDateCell, SeriesTitleCell, TemplatedCell, SeriesStatusCell, SeriesIndexRow,
-        ToolbarLayout, Config, LoadingView) {
+        ToolbarLayout, LoadingView) {
         return Marionette.Layout.extend({
             template: 'Series/Index/SeriesIndexLayoutTemplate',
 
             regions: {
-                series : '#x-series',
+                seriesRegion: '#x-series',
-                toolbar: '#x-toolbar'
+                toolbar     : '#x-toolbar'
             },
 
             columns:
@@ -100,60 +99,71 @@ define(
             },
 
             _showTable: function () {
-                var view = new Backgrid.Grid({
+                this.currentView = new Backgrid.Grid({
                     row       : SeriesIndexRow,
+                    collection: SeriesCollection,
                     columns   : this.columns,
-                    collection: this.seriesCollection,
                     className : 'table table-hover'
                 });
 
-                this._fetchCollection(view);
+                this._renderView();
+                this._fetchCollection();
             },
 
             _showList: function () {
-                var view = new ListCollectionView();
+                this.currentView = new ListCollectionView();
-                this._fetchCollection(view);
+                this._fetchCollection();
             },
 
             _showPosters: function () {
-                var view = new PosterCollectionView();
+                this.currentView = new PosterCollectionView();
-                this._fetchCollection(view);
+                this._fetchCollection();
             },
 
-            _showEmpty: function () {
-                this.series.show(new EmptyView());
-            },
-
-            _fetchCollection: function (view) {
-                var self = this;
-
-                if (this.seriesCollection.models.length === 0) {
-                    this.series.show(new LoadingView());
-
-                    this.seriesCollection.fetch().done(function () {
-                        if (self.seriesCollection.models.length === 0) {
-                            self._showEmpty();
-                        }
-                        else {
-                            view.collection = self.seriesCollection;
-                            self.series.show(view);
-                        }
-                    });
-                }
-
-                else {
-                    view.collection = this.seriesCollection;
-                    this.series.show(view);
-                }
-            },
 
             initialize: function () {
-                this.seriesCollection = new SeriesCollection();
+                this.seriesCollection = SeriesCollection;
+
+                this.listenTo(SeriesCollection, 'sync', this._renderView);
+                this.listenTo(SeriesCollection, 'remove', this._renderView);
             },
 
-            onShow: function () {
 
-                //TODO: Move this outside of the function - 'this' is not available for the call back though (use string like events?)
+            _renderView: function () {
+
+                if (SeriesCollection.length === 0) {
+                    this.seriesRegion.show(new EmptyView());
+                    this.toolbar.close();
+                }
+                else if (this.currentView && !this.currentView.isClosed) {
+                    this.currentView.collection = SeriesCollection;
+                    this.seriesRegion.show(this.currentView);
+
+                    this._showToolbar();
+                }
+            },
+
+
+            onShow: function () {
+                this._fetchCollection();
+                this._showToolbar();
+            },
+
+
+            _fetchCollection: function () {
+                if (SeriesCollection.length === 0) {
+                    this.seriesRegion.show(new LoadingView());
+                }
+
+                SeriesCollection.fetch();
+            },
+
+            _showToolbar: function () {
+
+                if (this.toolbar.currentView) {
+                    return;
+                }
+
                 var viewButtons = {
                     type         : 'radio',
                     storeState   : true,

UI/Series/SeriesCollection.js

@@ -1,10 +1,10 @@
-'use strict';
+'use strict';
 define(
     [
         'backbone',
         'Series/SeriesModel'
     ], function (Backbone, SeriesModel) {
-        return Backbone.Collection.extend({
+        var collection = Backbone.Collection.extend({
             url  : window.ApiRoot + '/series',
             model: SeriesModel,
 
@@ -17,4 +17,6 @@ define(
                 order  : -1
             }
         });
+
+        return new collection();
     });