javascript - Complex routing with Backbone & Backbone.Marionette -

javascript - Complex routing with Backbone & Backbone.Marionette -

i'm working on google maps app time now. app using backbone & backbone.marionette. screenshot of looks can found here: https://www.facebook.com/photo.php?fbid=566101353505241&set=a.516037321844978.1073741832.145077908940923&type=3&theater

for lastly couple of hours i've trying find advanced examples of using backbone router maintain app state, couldn't find more advanced examples single route parameters: #about #notes etc...

here i'm trying do.

when user moves around on map, alter url reflect this: /:lat/:lng/:zoom

when user selects marker list on right, alter url to: /:lat/:lng/:zoom/hotspot/:id

the list on right using backbone.paginator. when user clicks on page url alter to: /:lat/:lng/:zoom/page/:id

now if user clicks on hotspot want alter url to: /:lat/:lng/:zoom/page/:id/hotspot/:id

if illustration user used directions functionality in app want url reflect this:

/:lat/:lng/:zoom/direction/:start/:end

if uses list hotspots before or after used directions app want alter url to: /:lat/:lng/:zoom/direction/:start/:end/page/:id/hotspot/:id

you idea. want create possible user utilize part of app , share link after that.

as said i'm using backbone.marionette - application has lot of sub apps responsible map view, list view, directions view etc.

my problems follow:

how utilize backbone.navigate properly? when user moves around on map - can alter /:lat/:lng/:zoom . if user clicks on hotspot , pass backbone.navigate('hotspot/200') -> url alter #hotspot/200 , part lat/lng/zoom lost. same goes other url listed above. if pass part needs added url, backbone clear whole hash , add together new part. how deal that? have global function keeps track of possible url combinations , adds or replace depending on current situation?

if take url example: /:lat/:lng/:zoom/direction/:start/:end/page/:id/hotspot/:id /:lat/:lng/:zoom - part needed map app direction/:start/:end - part needed directions app page/:id - par needed hotspots app hotspot/:id - part needed hotspot app

how manage such urls? need phone call above apps 1 after other in order recreate app state.

is there way without going mad? examples of advanced backbone router (or html5-history) usage or tips welcome!

thanks in advance!

i'd create navigate(newstate) type function checks current state of app (ie. url). using current url can generate next url per of conditions adding new state current state or replacing parts of current state appropriate. 1 time that's done, phone call backbone.navigate new url.

javascript backbone.js routing marionette html5-history