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,11 +59,9 @@ 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,11 +85,9 @@ 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');
-                    }
                     });
             },
 

UI/Content/icons.less

@@ -53,3 +53,7 @@
   .icon(@remove);
   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">
+    <div class="well span11">
         <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,15 +12,14 @@ 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'
             },
 
@@ -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());
+            initialize: function () {
+                this.seriesCollection = SeriesCollection;
+
+                this.listenTo(SeriesCollection, 'sync', this._renderView);
+                this.listenTo(SeriesCollection, 'remove', this._renderView);
             },
 
-            _fetchCollection: function (view) {
-                var self = this;
 
-                if (this.seriesCollection.models.length === 0) {
+            _renderView: function () {
-                    this.series.show(new LoadingView());
 
-                    this.seriesCollection.fetch().done(function () {
+                if (SeriesCollection.length === 0) {
-                        if (self.seriesCollection.models.length === 0) {
+                    this.seriesRegion.show(new EmptyView());
-                            self._showEmpty();
+                    this.toolbar.close();
-                        }
-                        else {
-                            view.collection = self.seriesCollection;
-                            self.series.show(view);
-                        }
-                    });
                 }
+                else if (this.currentView && !this.currentView.isClosed) {
+                    this.currentView.collection = SeriesCollection;
+                    this.seriesRegion.show(this.currentView);
 
-                else {
+                    this._showToolbar();
-                    view.collection = this.seriesCollection;
-                    this.series.show(view);
                 }
             },
 
-            initialize: function () {
-                this.seriesCollection = new SeriesCollection();
-            },
 
             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;
+                }
 
-                //TODO: Move this outside of the function - 'this' is not available for the call back though (use string like events?)
                 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();
     });