I've searched various other similar StackOverflow questions but none of them seemed to offer a solution. I have the following backbone router setup:
var AppRouter = Backbone.Router.extend({
routes: {
"" : "homeAction",
"/portfolio" : "portfolioAction",
"/about_us" : "aboutUsAction",
"/contact" : "contactAction"
},
initialize: function () {
},
homeAction: function () {
alert("User has navigated home");
},
portfolioAction : function() {
alert('user have navigated to portfolio');
},
servicesAction: function () {
alert("User has navigated to services");
},
aboutUsAction: function () {
alert("User has navigated to about us");
},
contactAction: function () {
alert("User has navigated home");
},
requestQuoteAction: function () {
alert("User has requested to submit a quote");
}
});
var app = new AppRouter();
$(function() {
Backbone.history.start();
});
When I navigated to mydomain.com/# The homeAction route gets called as expected. However if I try navigating to mydomain.com/#/portfolio, nothing happens. Any idea why this method is not getting called?
Removing the slash at the begining of your route should work.
var AppRouter = Backbone.Router.extend({
routes: {
"" : "homeAction",
"portfolio" : "portfolioAction",
"about_us" : "aboutUsAction",
"contact" : "contactAction"
},
...
Then try to go to mydomain.com/#portfolio for example.
Related
I have an editor view and if there are unsaved changed I am prompting on window closes and also on backbone routes.
Problem is that Backbone.Router.execute runs after the url change and so I am trying to implement the most reliable and elegant way of preventing the url change.
In the example below clicking the "About" route will prevent the route callback and then rewind the url change - it seems less than ideal that I have to use window.history.back() (because it creates a history entry).
Can you think of a better way? I know a jQuery on-click can catch the event before url change but I'm not sure how to nicely integrate that with a Backbone.Router. Thanks.
var HomeView = Backbone.View.extend({
template: '<h1>Home</h1>',
initialize: function () {
this.render();
},
render: function () {
this.$el.html(this.template);
}
});
var AboutView = Backbone.View.extend({
template: '<h1>About</h1>',
initialize: function () {
this.render();
},
render: function () {
this.$el.html(this.template);
}
});
var ContactView = Backbone.View.extend({
template: '<h1>Contact</h1>',
initialize: function () {
this.render();
},
render: function () {
this.$el.html(this.template);
}
});
var AppRouter = Backbone.Router.extend({
routes: {
'': 'homeRoute',
'home': 'homeRoute',
'about': 'aboutRoute',
'contact': 'contactRoute'
},
execute: function(callback, args, name) {
if (window.location.hash === '#/about') {
window.history.back();
return false;
}
if (callback) {
callback.apply(this, args);
}
},
homeRoute: function () {
var homeView = new HomeView();
$("#content").html(homeView.el);
},
aboutRoute: function () {
var aboutView = new AboutView();
$("#content").html(aboutView.el);
},
contactRoute: function () {
var contactView = new ContactView();
$("#content").html(contactView.el);
}
});
var appRouter = new AppRouter();
Backbone.history.start();
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://underscorejs.org/underscore.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>
<div id="navigation">
Home
About
Contact
</div>
<div id="content"></div>
The only thing I can think of is listening to clicks and doing things with jQuery, or saving the last hash and doing window.history.replaceState(undefined, undefined, "#last_hash_value").
Calling navigate after saving a model.
this.model.save({},{
success: function(model, response, options){
Backbone.history.navigate('getCampaigns', {tigger: true});
}
});
But it never hits the specified route.
Route class
var Router = Backbone.Router.extend({
routes: {
"":"home",
"login":"login",
"getCampaigns":"getCampaigns"
},
start: function() {
Backbone.history.start({pushState:true});
},
home: function() {
var loginView = new LoginView({model: loginModel});
loginView.render();
$(".container").append(loginView.el);
},
login: function(event) {
event.preventDefault();
},
getCampaigns: function() {
this.dashboardList.fetch();
$('.container').html(this.dashboardListView.render().el);
}
});
var app = new Router();
app.start();
You have an error in your code :
Backbone.history.navigate('getCampaigns', {trigger: true}); // not {tigger: true}
I'm not sure how to express this in code, as I can't seem to locate the problem, but my issue is that Backbone.history seems to be recording two items when a user clicks on a list item in my app.
This is not consistent.
My app has a 4 item navigation at the bottom that links to 4 main sections (the first one being home - routed to '/'). If I load up the app, go to one of the other navigation pages, then click the 'Home' button again and then click one of the navigation options I get a list of items to choose from. If I then choose one two entries are added - Firstly, for some reason, a reference to the home route with /# at the end and then the route for the item I clicked.
The end result is that 'back' then inexplicably takes me to the home page.
If it helps, my router looks like this...
var siansplanRouter = Backbone.Router.extend({
initialize: function () {
var that = this;
this.routesHit = 0;
//keep count of number of routes handled by your application
Backbone.history.on('route', function() { that.routesHit++; }, this);
window.SiansPlanApp.render();
window.SiansPlanApp.router = this;
},
routes: {
'': 'showHome',
'home': 'showHome',
'hub': 'showHome',
'samples': 'showJqmSamples',
'mealplanner': 'showCurrentMealPlanner',
'mealplanner/:planId': 'showMealPlanner',
'recipes': 'showRecipeSearch',
'recipes/:recipeId': 'showRecipe',
'settings': 'showSettings',
'versioninfo': 'showVersionInfo',
'*other': 'showHome'
},
routesHit: 0,
back: function() {
if(this.routesHit > 1) {
window.history.back();
} else {
//otherwise go to the home page. Use replaceState if available so
//the navigation doesn't create an extra history entry
this.navigate('/', { trigger: true, replace: true });
}
},
showHome: function () {
SiansPlanApp.renderHome();
},
showJqmSamples: function () {
SiansPlanApp.renderView(new SiansPlanApp.views.Hub.Samples());
},
showMealPlanner: function (planId) {
SiansPlanApp.renderView(new SiansPlanApp.views.Planner.MealPlanner({ id: planId }));
},
showCurrentMealPlanner: function () {
SiansPlanApp.renderView(new SiansPlanApp.views.Planner.MealPlanner({ current: true }));
},
showRecipeSearch: function () {
SiansPlanApp.renderView(new SiansPlanApp.views.Recipes.Search());
},
showRecipe: function (recipeId) {
SiansPlanApp.renderView(new SiansPlanApp.views.Recipes.Recipe({ id: recipeId }));
},
showSettings: function () {
SiansPlanApp.renderView(new SiansPlanApp.views.System.Settings());
},
showVersionInfo: function () {
SiansPlanApp.renderView(new SiansPlanApp.views.About.VersionInfo.ListView());
}
});
I've got some basic elements in a kick off file too here...
define(['router', 'regions/r-app', 'jquery', 'domReady'],
function (SiansPlanRouter, AppRegion) {
var run = function () {
// Global click event handler to pass through links to navigate
$(document).on("click", "a:not([data-bypass])", function (e) {
var href = { prop: $(this).prop("href"), attr: $(this).attr("href") };
var root = location.protocol + "//" + location.host + SiansPlanApp.root;
if (href.prop && href.prop.slice(0, root.length) === root) {
e.preventDefault();
Backbone.history.navigate(href.attr, true);
}
});
$.ajaxPrefilter(function (options, originalOptions, jqXhr) {
//options.url = '/api' + options.url;
});
// Create the global namespace region object.
window.SiansPlanApp = new AppRegion();
// Adds the authorization header to all of the API requests.
$(document).ajaxSend(function (e, xhr, options) {
xhr.setRequestHeader("Authorization", 'SiansPlan ' + SiansPlanApp.cookies.getSessionData());
});
// Load up session data if any is present yet - this can't happen until the XHR headers are set up.
SiansPlanApp.session.loadSession();
// Instantiate the router.
window.SiansPlanApp.router = new SiansPlanRouter();
// Boot up the app:
Backbone.history.start();
};
return {
run: run
};
});
I'm having a issue where transitioning is not occurring on a page reload/refresh. When I start the application and click on the links, everything works perfectly, but when I reload the route - I get an empty page (blank). This is happening for me on the MovieIndexRoute below.
// Router
MediaUi.Router.map(function () {
this.resource('movies', { path: '/'}, function() {
this.resource('movie', { path: 'movie/:id' }, function() {
this.route('edit', { path: '/edit' });
});
});
});
// Movies Route
MediaUi.MoviesRoute = Ember.Route.extend({
model: function() {
var media;
media = MediaUi.Media.find();
return media;
}
});
// Movie Route
MediaUi.MovieRoute = Ember.Route.extend({
serialize: function(model) {
return { id: model.get('_id') };
}
});
// Movie Index Route
MediaUi.MovieIndexRoute = Ember.Route.extend({
model: function(params) {
return this.modelFor('movie');
}
});
You can also access the repo here: https://github.com/alvincrespo/media-ui/tree/nested-resources on the nested-resources branch.
I've also added the following screenshot, showing the page and console.
Any help with this would be greatly appreciated. Thank You!
Don't know how to force backbone correctly navigate to routes like this:
page/#/channel/name
instead of
page#channel/name
or
page#/channel/name
My router works with one main model and observes its states, so the router should be able to change URL without triggering its events in this case.
I tried to do like this:
router.navigate("#/channel/" + encodeURIComponent(appState.data.channelName), { trigger: false });
but in this case "trigger: false" didn't work, so I got undesirable call of router event.
Backbone.history root is set to "/", and I'm currently not using pushState.
See code example below:
var Router = Backbone.Router.extend({
routes: {
"": "index",
"index": "index",
"channel/:channelName": "changeChannel"
},
initialize: function (options) {
var router = this;
if (options.model) {
router.model = options.model;
} else {
//TODO: throw error
return;
}
//update url in cases of model channelSelection changes
router.model.on("stateChangeAccepted", function (appState) {
switch (appState.mode) {
case "channel":
router.navigate("/channel/"
+ encodeURIComponent(appState.data.channelName), { trigger: false });
break;
}
});
},
index: function () {
var router = this;
router.model.trigger("stateChangeRequest", {
mode: "channel",
data: {
channelIndex: 0
}
});
},
changeChannel: function (channelName) {
var router = this;
router.model.trigger("stateChangeRequest", {
mode: "channel",
data: {
channelName: decodeURIComponent(channelName)
}
});
}
});
Your router.navigate call does not match the route you defined:
routes: {
"": "index",
"index": "index",
"channel/:channelName": "changeChannel"
},
This means that the URL for a channel should be http://host.com/#channel/someChannel. However, your router.navigate calls are either router.navigate('#/channel...) or router.navigate('/channel...). It should be:
router.navigate("channel/" + encodeURIComponent(appState.data.channelName), { trigger: false });
If, however, you want to use routes like http://host.com/#/channel/someChannel, then your route should be:
routes: {
"": "index",
"index": "index",
"/channel/:channelName": "changeChannel"
},
and your navigate call should be:
router.navigate("/channel/" + encodeURIComponent(appState.data.channelName), { trigger: false });