all links are automatically handled through backbone router.

no more page reload.

UI/Calendar/CalendarItemTemplate.html

@@ -3,7 +3,7 @@
         <h1>{{day}}</h1>
         <h4>{{month}}</h4>
     </div>
-    <a href="series/details/{{series.titleSlug}}">
+    <a href="/series/details/{{series.titleSlug}}">
         <h4>{{series.title}}</h4>
     </a>
     <p>{{startTime}} {{bestDateString}}<span class="pull-right">{{seasonNumber}}x{{paddedEpisodeNumber}}</span><br>{{episodeTitle}}</p>

UI/MainMenuView.js

@@ -24,13 +24,6 @@ define(['app'], function () {
             } else {
                 this.setActive(event.target);
             }
-
-            if (href && href.startsWith('http')) {
-                window.location.href = href;
-            } else {
-                NzbDrone.Router.navigate(href, { trigger: true });
-            }
-
         },
 
         setActive: function (element) {

UI/Mixins/backbone.modelbinder.mixin.js

@@ -21,29 +21,6 @@ Marionette.ItemView.prototype.self$ = function (selector) {
     return  this.$(selector).not("[class*='iv-'] " + selector);
 };
 
-
-Marionette.ItemView.prototype._handleRelativeLink = function (event) {
-    console.log('clikc');
-    event.preventDefault();
-    var $target = $(event.target);
-
-    var href = event.target.getAttribute('href');
-
-    if (!href && $target.parent('a') && $target.parent('a')[0]) {
-
-        var linkElement = $target.parent('a')[0];
-
-        href = linkElement.getAttribute('href');
-    }
-
-    if (!href) {
-        throw 'couldnt find route target';
-    }
-
-    NzbDrone.Router.navigate(href, { trigger: true });
-};
-
-
 Marionette.ItemView.prototype.render = function () {
 
     var result = oldMarionetteItemViewRender.apply(this, arguments);
@@ -64,7 +41,6 @@ Marionette.ItemView.prototype.render = function () {
         this._modelBinder.bind(this.model, this.el);
     }
 
-    this.$('a[href^="/"]').children().click(this._handleRelativeLink);
     this.$el.addClass('iv-' + this.viewName());
 
     return result;

UI/RouteBinder.js

@@ -0,0 +1,44 @@
+"use strict";
+define(['app'], function () {
+
+    //This module will automatically route all links through backbone router rather than
+    //causing links to reload pages.
+
+    var routeBinder = {
+
+        bind: function () {
+            $(document).on('click', 'a[href]', this._handleClick);
+        },
+
+        _handleClick: function (event) {
+            var $target = $(event.target);
+
+            if ($target.hasClass('no-router')) {
+                return;
+            }
+
+            console.log('click');
+            event.preventDefault();
+
+            var href = event.target.getAttribute('href');
+
+            if (!href && $target.parent('a') && $target.parent('a')[0]) {
+
+                var linkElement = $target.parent('a')[0];
+
+                href = linkElement.getAttribute('href');
+            }
+
+            if (!href) {
+                throw 'couldnt find route target';
+            }
+
+
+            if (!href.startsWith('http')) {
+                NzbDrone.Router.navigate(href, { trigger: true });
+            }
+        }
+    };
+
+    return routeBinder;
+});

UI/Routing.js

@@ -1,5 +1,5 @@
 "use strict";
-require(['app', 'Controller'], function (app, controller) {
+require(['app', 'Controller', 'RouteBinder'], function (app, controller, routeBinder) {
 
     NzbDrone.Router = Backbone.Marionette.AppRouter.extend({
 
@@ -27,6 +27,7 @@ require(['app', 'Controller'], function (app, controller) {
         NzbDrone.Router = new NzbDrone.Router();
         Backbone.history.start({ pushState: true });
 
+        routeBinder.bind();
     });
 });
 

UI/Settings/SettingsLayoutTemplate.html

@@ -1,11 +1,11 @@
 <ul class="nav nav-tabs" id="myTab">
-    <li><a href="#naming" class="x-naming-tab">Naming</a></li>
-    <li><a href="#quality" class="x-quality-tab">Quality</a></li>
-    <li><a href="#indexers" class="x-indexers-tab">Indexers</a></li>
-    <li><a href="#download-client" class="x-download-client-tab">Download Client</a></li>
-    <li><a href="#notifications" class="x-notifications-tab">Notifications</a></li>
-    <li><a href="#general" class="x-general-tab">general</a></li>
-    <li><a href="#misc" class="x-misc-tab">Misc</a></li>
+    <li><a href="#naming" class="x-naming-tab no-router">Naming</a></li>
+    <li><a href="#quality" class="x-quality-tab no-router">Quality</a></li>
+    <li><a href="#indexers" class="x-indexers-tab no-router">Indexers</a></li>
+    <li><a href="#download-client" class="x-download-client-tab no-router">Download Client</a></li>
+    <li><a href="#notifications" class="x-notifications-tab no-router">Notifications</a></li>
+    <li><a href="#general" class="x-general-tab no-router">general</a></li>
+    <li><a href="#misc" class="x-misc-tab no-router">Misc</a></li>
 </ul>
 
 <div class="tab-content">