How might I go about making the above happen? For instance, if a user navigates to this URL:
app.com/#search/test.com/index.html
with this router set up in a controller to catch it:
var searchRouter = new Marionette.AppRouter({
controller: searchController,
appRoutes: {
'search': 'init',
'search/:term': 'search'
}
});
How would the function search be passed term inclusive of the / and everything that follows? In my current testing, it seems that this route isn't called at all when the search term contains a /.
Routes matching are sometimes tough and can be a pain to debug, I have had a lot of issues with that so far.
So I would like to suggest you something else:
Just have 1 route to cover both scenarios and route to init or search inside your listener:
appRoutes: {
'search(/:term)': 'searchListener'
},
searchListener: function(term) {
if (!term) this.init();
else this.search(term);
}
This is more just to express the idea, feel free to make it better. I hope this approach solves your problem.
Related
This is a simple question, but I am new to routing and haven't been able to find an answer to this.
I have a Marionette Router (if I intimidate you, its really the same thing as a Backbone Router. Very simple).
sys.routes = {
"app/:id": "onAppRoute",
};
sys.Router = new Marionette.AppRouter({
controller: {
onAppRoute: function(route) {
console.log('Called app route!');
},
},
appRoutes: sys.routes,
});
Backbone.history.start({pushState: true})
This works - if you hit the back button my browser, the url will change within my Single Page Application and will call the onAppRoute function.
However, let's say I open a new browser window and paste in my page url to a certain 'app':
http://localhost/app/myApplication
This doesn't call the onAppRoute function. It doesn't even seem like it should, though, but I really don't know.
I want it to.
I don't know if I am doing it wrong, or if I should just manually fire it by grabbing my page url on page load, parsing it, then 'navigating' to that route. Seems hacky.
Contrary to your intuition, backbone's default behaviour is to trigger matching routes on page load! cf. http://backbonejs.org/#Router - look for the option silent: true. You'd have to specify that for the router to IGNORE your matching routes on page load, i.e. not trigger the corresponding callbacks.
So your problem lies somewhere else: your routes do NOT match the url you have stated as an example. Clearly, you require an :id parameter, trailing http://localhost/app/myApplication. Therefore, http://localhost/app/myApplication/213 would cause your callback to be triggered on page load, given you didn't pass silent: true as an option to backbone.history.start().
If you want to match the 'root' url, i.e. no params, you would define the following route:
routes: {
'/': someFunction
}
The :id part is a parameter, which will be extracted by Backbone.Router and sent as an argument to onAppRoute.
But in your URL you don't have any parameters /localhost/app/myApplication
In Backbone, is there any way to trigger a route event handler, without changing the URL?
What I mean is that I want to trigger a route handler, but I don't want to change the URL.
Hence, I don't want to use
router.navigate(route, {trigger: true});
as this will cause the URL to change.
The router itself is connected to a function. The simple answer is to call the function straight away, simply bypassing the route handling.
Example
(function( $, Backbone ) {
var exports = window.app = window.app || {},
Router = Backbone.Router.extend({
// Here you declare what the routes are in your router
// and what functionality they should trigger.
routes: {
"help" : "help",
"search/:query" : "search",
"search/:query/p:page": "search"
},
// Declare route functions.
help : function() {},
search: function( query, page ) {}
});
// Export the router.
exports.router = new Router();
// Just a dummy object for calling the router.
var cookieMonster = {
init: function() {
// Do something on init.
// End with calling the route help function.
exports.router.help();
}
};
}(jQuery, Backbone));
cookieMonster.init() would in this case end with a call to the help function in the router.
A tip is to look at Backbone Marionette where you have a Controller which has the function logic seperated from the routes, one of many things that make Marionette awesome.
For what its worth, Marionette routing is explained extensively here: http://samples.leanpub.com/marionette-gentle-introduction-sample.pdf
The strategy that is discussed is separating URL management from application reactions (e.g. switching sub-applications). This means that you're then free to have your app trigger a handler (using a Marionette event) without modifying the URl fragment.
Have you tried Backbone.history.loadUrl(route);?
Trying to get a backbone router to work. Having one of those situations where nothing is happening so its difficult to pinpoint the problem.
Is there a way to find out what the Router is actually receiving so that I can try to pinpoint the problem with my routes?
This is the code so far:
// ROUTER
var TheRouter = Backbone.Router.extend({
// ROUTES
routes: {
"": "main",
"/route1/:key": "route1"
},
// INITIALIZE
initialize: function() {
_.bindAll(this);
},
// ROUTES
main: function(){
alert('main');
},
route1: function(key){
alert(key);
}
});
// Create new router
var theRouter = new TheRouter();
// Start history
Backbone.history.start({pushState: true});
Thanks so much!
You can bind to the route event on the Backbone.history. According to the source code you get all the info going into the router from that event, meaning you should be able to console.log it.
You need to remove the slash from the beginning of your second route.
So the
"/route1/:key": "route1"
line becomes
"route1/:key": "route1"
If you are still getting no feedback, make sure you defined your dependent scripts in the correct order (jquery.js, underscore.js, backbone.js, yourRouter.js).
I want to have a kind of RESTful URL structure like below:
/accounts
/accounts/account/123
I've set up my routes as such:
MyRouter = Backbone.Router.extend({
routes : {
'/accounts': 'accounts',
'/accounts/account/:account': 'account',
},
accounts: function() {
console.log('accounts CALLED');
},
account: function() {
console.log('account CALLED');
},
});
The problem, is when I go to /accounts/account/123 , both accounts() and account() get called (as the URL matches both routes). I tried a route such as /accounts$, but it doesn't look like it's supported in the routes hash.
Is there a way to accomplish this? Would a manual router.route(route, name, callback) work instead (although I really prefer not to do that).
I got this cleared up by another SO question. I didn't realise that I had to use the router.navigate function strictly.
Using the router programmatically (not via browser bar), those duplicate calls go away. I'm also seeing the expected functions called only once... when using router.navigate.
I still have to find out how to capture back & forward buttons to call those functions. Thanks for the feedback so far.
Try /accounts$ instead. $ is the regex for the end of the string.
I have a simple implementation of Backbone.js which goes like this -
$(document).ready(function(){
Workspace = Backbone.Router.extend({
routes: {
"/getAcademics": "academics"
},
academics: function(){
alert("ok");
$("#content").append("<div>Academics</div>");
}
});
var myWorkspace = new Workspace;
});
The link in the body is given as -
Academics
Though the router routes to the link #/getAcademics but it does not execute the function academics. Any clues as how to rectify this. Am I missing something else.
Thanks
After you instantiate your router, and before you attempt to use any of its routes, you need to call Backbone.history.start(). This will setup a listener for hash changes and call the correct route functions when needed.
You can find more information here: http://documentcloud.github.com/backbone/#History