8

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?..

Julik
  • 7,676
  • 2
  • 34
  • 48
  • Try http://millermedeiros.github.io/crossroads.js – mfirry Feb 07 '14 at 09:11
  • Hi @Julik, when you say `the address bar doesn't change` it means that if you write the initial path e.g. `domain.com/page/one` it will render the content and it will stay in that path "forever"? Even if you navigate to a different page? – a--m Feb 26 '14 at 21:52
  • What I mean is that on IE I will be intercepting clicks on `a` elements and changing app state in response to that, but it won't be recorded in the browser history - and the URL will stay where it was at page load. – Julik Feb 26 '14 at 22:07

1 Answers1

2

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..

bastien
  • 131
  • 1
  • 5
  • I could do that, but that would do a full page reload, while I would like to just change internal app state instead. – Julik Mar 20 '14 at 10:56
  • okay then and thus why not working with custom events instead of route ? I mean for instance doing in the above created navigate function in your layout `this.trigger("goto", {whateverParamsYouNeedHere:true});` and in your router at the initialization you do `var that = this; this.listenTo(thelayoutyouobserve, "goto", function(e){ this.controller.theFunctionToNavigate(e.whateverParamsYouNeedHere);});` – bastien Mar 21 '14 at 12:28
  • Because most of my app structure is based on URLs, even though they might not be visible in the address bar. So I don't want to attach handlers to specific elements of the UI but for them to trigger the router by virtue of having the right HREF attribute. – Julik Mar 22 '14 at 14:01