How to direct multiple routes to the same method in Backbone JS? - javascript

This is my routes object in a BackboneJS app:
routes: {
"" : "_navigate",
"home" : "_navigate",
"blog" : "_navigate",
"photos" : "_navigate",
"notes" : "_navigate",
"about" : "_navigate",
"singlepost_:id" : "_navigate"
},
it redirects routes to the _navigate method, which looks like this:
_navigate: function(postId) {
if (postId) {
// show single entry
return;
}
// show regular entry
},
It works perfectly fine. However, I find the repetitive routes object to be annoying.
My question is: Is there a better way to direct all these routes to the same method without repeating yourself so much?
Thanks!

http://backbonetutorials.com/what-is-a-router/ Check out the section on splats
Any "*splats" or ":params" in route definitions are passed as
arguments (in respective order) to the associated function. A route
defined as "/:route/:action" will pass 2 variables (“route” and
“action”) to the callback function. (If this is confusing please post
a comment and I will try articulate it better) Here are some examples
of using ":params" and "*splats"
routes: {
"/posts/:id": "getPost",
// Example
"/download/*path": "downloadFile",
// Download
"/:route/:action": "loadView",
// Load Route/Action View
},
getPost: function( id ){
alert(id); // 121
},
downloadFile: function( path ){
alert(path); // user/images/hey.gif
},
loadView: function( route, action ){
alert(route + "_" + action); // dashboard_graph
}

Quite simple, really.
routes: {
"*actions:_id": "_navigate"
}
Thanks to Jason Strimpel from the BackboneJS Google Group.

Related

Backbone Subrouter to specific view

Is it possible to add a subrouter to a specific view? Lets say I have a Backbone app for multiple Cars. Right now, my Router would look like this
carRouter = Backbone.Router.extend({
routes: {
'': 'index'
'contact' : 'contact'
':car': 'car',
':car/gallery' : 'cargallery',
':car/specs' : 'specs',
':car/infos' : 'infos',
'about: 'aboutPage'
}
car: function(){
// do this
},
cargallery: function(){
// do this
},
specs: function(){
// do this
},
infos: function(){
// do this
}
...etc
});
that approach, obviously makes the whole page render, which I basically want to avoid. When I click on "gallery" and "specs" back and forth for example, the whole page re-renders on each click.
So, is it possible to do something like:
routes: {
'contact' : 'contact'
':car': 'car',
'about: 'aboutPage'
},
car: function(){
// new router containing
// ':car/gallery' : 'cargallery',
// ':car/specs' : 'specs',
// ':car/infos' : 'infos',
},
}
And then, on the Car page, I would have 3 tabs in the menu (gallery, specs, info), which will load the Model/collection of the specific car, without the page re-rendering?
Any help/suggestion is appreciated!
You can accomplish this with events,Backbone trigger and and custom EventHandler Object.
The events hash in your CarView :
events : {
"click .spec" : "showSpecs",
"click .gallery" : "showGallery",
"click .info" : "showInfo",
},
//Invoked when you click the show specs tab.
showSpecs : function(event) {
//Say that EventBus is your custom event handler
event.preventDefault();
MyApp.EventBus.trigger("show:spec",payload);
},
showGallery : function(event) {
event.preventDefault();
MyApp.EventBus.trigger("show:gallery",payload);
}
....
And in MyApp.EventBus :
_.extend(MyApp.EventBus,Backbone.Events);
MyApp.EventBus.showGallery = function(payload) {
// payload is an optional data that you can get from the triggered view
// Fetch your models or collection
// Instantiate the corresponding view and pass your data(models/collections) to it.
// Update the url to reflect the new view so that if you hit refresh you
// come to the same tab.
MyApp.router.navigate("/your-url",{trigger:false});
}
MyApp.EventBus.on("show:gallery",showGallery);
Also add a method in the router which can handle the refresh of tabs.

Using switch statements instead of using different functions in Backbone routing

Backbone routing allows us to route to different pages.
var Workspace = Backbone.Router.extend({
routes: {
"help": "help", // #help
"search/:query": "search", // #search/kiwis
"search/:query/p:page": "search" // #search/kiwis/p7
},
help: function() {
...
},
search: function(query, page) {
...
}
});
My question is instead of writing different functions for different routes, why not write a single function for all the routes and use a switch statement to determine the exact route and performing tasks based on the route.
It would look something like this.
var Workspace = Backbone.Router.extend({
routes: {
"help": "main", // #help
"search/:query": "main", // #search/kiwis
"search/:query/p:page": "main" // #search/kiwis/p7
},
main: function() {
...
switch(){
case("help") : ...;
case("search") : ...;
}
}
});
I don't know the exact implementation. I just gave a brief idea. Is this possible in Backbone routing?
Because that will lead to a nightmare hell as soon as you have more than 2 o 3 routes/functions, or you need anything more that 2 lines to setup the data and views for each route.
Also, it's much much easier to test your route handlers if you can simply call one function.
If you need one function per your requirements, then what's wrong is your route definition! I assume you are modeling a single page with search functionality and pagination of those search results. Let's suppose that page is accesed with a url like "yourapp/#page":
Enter optional parameters my friend: :)
http://backbonejs.org/#Router-routes
var Workspace = Backbone.Router.extend({
routes: {
"page(/search/:query)(/:page)": "main"
},
main: function(query, page) {
if(query) {
//you're searching
if(page) {
//display specific page
}
else {
//show first results page
}
}
else {
//show you initial views/models
}
}
});
That route will handle: page, page/search/apples and page/search/apples/4

how to switch views with the backbone.js router?

This is more of a conceptual question, in terms of using the backbone router and rendering views in backbone.
for the sake of an example (what I'm building to learn this with) I've got a basic CRUD app for contacts, with create form, a listing of all contacts, a contact single view and an edit form.
for simplicities sake I'm going to say that I would only want to see one of these things at a time. Obviously showing and hiding them with jQuery would be trivial, but thats not what I'm after.
I have two ideas,
1) trigger custom events from my router that removes all views and sends events that could be listened for in all views (triggering a close method ) and a main App view that then instantiates a specific view - ie :
App.Router = Backbone.Router.extend({
routes: {
'' : 'index',
'addnew' : 'addNew',
'contacts/:id' : 'singleContact',
'contacts/:id/edit' : 'editContact'
},
index: function(){
vent.trigger('contactR:closeAll');
vent.trigger('contactR:index');
},
addNew: function() {
vent.trigger('contactR:closeAll');
vent.trigger('contactR:addNew');
},
singleContact: function(id) {
vent.trigger('contactR:closeAll');
vent.trigger('contactR:singleContact', id);
},
editContact: function(id) {
vent.trigger('contactR:closeAll');
vent.trigger('contactR:editContact', id);
},
});
(nb : vent is extending the backbone events obj so I can pub / sub )
2) or would / could / should I send a close all event and create an instance of the view in the router ?
Note I'm looking to achieve this without delving into additional libraries or frameworks like marionette etc.
You can use an utility object like this :
var ViewManager = {
currentView : null,
showView : function(view) {
if (this.currentView !== null && this.currentView.cid != view.cid) {
this.currentView.remove();
}
this.currentView = view;
return view.render();
}
}
and whenever you want to show a view use ViewManager.showView(yourView)
App.Router = Backbone.Router.extend({
routes: {
'' : 'index',
'addnew' : 'addNew',
'contacts/:id' : 'singleContact',
'contacts/:id/edit' : 'editContact'
},
index: function(){
var indexView ...
ViewManager.showView(indexView);
},
addNew: function() {
var addNewView ...
ViewManager.showView(addNewView);
},
singleContact: function(id) {
var singleContactView ...
ViewManager.showView(singleContactView);
},
editContact: function(id) {
var editContactView ...
ViewManager.showView(editContactView);
},
});
So it's the ViewManager that's responsible of rendering your views

Backbone router with multiple parameters

I need to get this to work:
routes: {
':product' : 'showProduct',
':product/:detail': 'showProductDetail'
showProductDetail never gets called while the ':product' route is set even if it is set afterwards. I tried the following
routes: {
':product(/:detail)': showProductOrDetail
}
But this will not get called when only the second parameter changes.
It is important that I have the product itself or the product and detail in the url.
Does anyone know how to fix this?
There's a little hacky solution to your problem. I have a feeling there is a nicer way to do this but that should work:
routes: {
"product/:id": "showProduct",
"product/:id/details/:did": "showDetails"
},
showProduct: function(id) {
this.showDetails(id);
},
showDetails: function(id, did) {
// Check did for undefined
}
A late response (over a year).. but you can use RegEx in a backbone router to achieve this.
My example presumes the parameters are going to start with a number.
ie: localhost:8888/#root/1param/2param
var router = Backbone.Router.extend({
initialize: function () {
// Use REGEX to get multiple parameters
this.route(/root/, 'page0');
this.route(/root\/(\d+\S+)/, 'page1');
this.route(/root\/(\d+\S+)\/(\d+\S+)/, 'page2');
},
page0:function(){
console.log("no id");
},
page1:function(id1){
console.log(id1);
},
page2:function(id1,id2){
console.log(id1);
console.log(id2);
}
});
Hope this helps.

call a function if no route found

In my application there are 3 routes as defined below everything is working properly but when then the route which is not defined is called, the blank page is displayed. like, if i enter url http://example.com/page.php/#invalidRoute then i got empty page i want to load
"profile" view if no route is found, my code is given below....
ProfileRouter = Backbone.Router.extend({
initialize : function() {},
routes : {
'' : 'profile',
'detailedProfile' : 'detailedProfile',
'moreReviews' : 'moreReviews',
},
profile : function() {
/*Load a profile*/
},
detailedProfile : function() {
/*Load detail profile*/
},
moreReviews : function() {
/*Load more review*/
}
});
thanks in advance...
You can do something like this. The last route will match everything else that the other routes didn't fulfill. The order of the routes also matters in this case.
routes : {
'' : 'profile',
'detailedProfile' : 'detailedProfile',
'moreReviews' : 'moreReviews',
'*invalidRoute' : 'profile' /* catch all route */
}

Categories