CODEWITHSUNDEEP
javascripthtmlbackbone.jsurl-routingmarionette
Mark
Mark

Reputation: 1347

Default anchor action with Marionette Routing

I have a Marionette application that is composed of a series of steps, each step corresponding to a different view, each with an anchor tag in a navigation bar.

<a href="#toolbox">Select Tools</a>
<a href="#payment">Pay</a>

My current struggle is finding the best way to structure the URLs so that the Marionette.AppRouter can respond to them. Whenever I use a scheme like href="/toolbox", the page just tries to navigate away to that URL (bypassing the router), unless I prevent the default action of the anchor. Should I be using a fragment scheme like href="#toolbox"? Or, should I be setting up my Backbone.history.start() call differently? What is the best practice here?

Upvotes: 2

Views: 1496

Answers (1)

David Sulc
David Sulc

Reputation: 25994

What I do is use "#toolbox" as the href, but I still call preventDefault on the click event.

That way:

  • the app handles the navigation, and simply updates the URL fragment
  • the user can open a link in a new window (or load a bookmark) and land on the expected page (because the route gets triggered by the routing controller)

Essentially, once a route has been loaded and the user is "inside" your Marionette app, routes shouldn't be triggered anymore. Instead controller actions should be called via events to udpate the app's display. More on this approach to routing here (see section "Implementing Routing"): http://samples.leanpub.com/marionette-gentle-introduction-sample.pdf

Upvotes: 3

Related Questions