all links are automatically handled through backbone router.

no more page reload.
This commit is contained in:
kay.one 2013-06-05 22:13:31 -07:00
parent 5ea794939c
commit 50918ae65f
6 changed files with 55 additions and 41 deletions

View File

@ -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>

View File

@ -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) {

View File

@ -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;

44
UI/RouteBinder.js Normal file
View File

@ -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;
});

View File

@ -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();
});
});

View File

@ -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">
@ -18,4 +18,4 @@
<div class="tab-pane" id="misc">Misc Settings</div>
</div>
<button class="btn btn-primary x-save-settings">Save</button>
<button class="btn btn-primary x-save-settings">Save</button>