Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Alternative to the Backbone router without hash fallbacks and better back/forward state support?

I am currently using the Backbone router for my SPA. It sort of works OK, but I am having a number of small issues:

The problem is - I want to either have pushState navigation or none, meaning - app state gets executed (when I pass the "initial" URL to the router or I trigger a route via JS), but the address bar doesn't change. I don't want the hashChange fallbacks for IE9. It will work just fine if IE9 does not get the back button and the changing address bar, but still retains navigation state within the application. I can then show the users a URL which they can bookmark and the server will route that page and the app state will bootstrap based on the initial URL. The address bar not changing in IE during in-app navigation is a compromise I am willing to accept.

Another problem that I have is that I am using navigate(url, {trigger: true}) for my intercepted HREFs, and the back button doesn't work (does nothing). But I really need to change app state on forward/back navigation, even if it gets rebuilt for that particular URL - I'd rather rebuild the state.

What are my options in terms of routers that I could use? Like I said, I don't want to have hashbang fallbacks (meaning - I only want to have ONE way of representing URLs in the application, period).

What should I use? Director.js? History.js? There seems to be quite a number of router/history libraries out there but which one is the closest to what I'm looking for?..

like image 663
Julik Avatar asked Feb 07 '14 09:02

Julik


1 Answers

Supposing you have Modernizr around scanning the HTML5 history support, if I understand well wouldn't a fast solution be, in your main layout js file, to add as event

'click a' : "navigate"

and add the function navigate to this layout as follow

navigate : function(e){
    if(!Modernizr.history) document.location.href = $(e.currentTarget).attr("href");
},

to optimize, you could of course bind that only if history is not supported,don't forget to include "modernizr" in your layout. Hope this is an interesting answer for you..

like image 89
bastien Avatar answered Nov 13 '22 11:11

bastien