Dojo FAQ: Does Dojo have routing like Backbone and Ember

By on June 18, 2014 11:42 am

DojoFAQ

A client-side router allows an application to respond to changes in the URL, handling browser navigation, history, and making single page applications bookmarkable. The user can share the URL or use it to quickly navigate to specific states of the application. Many JavaScript frameworks and toolkits, including Dojo, provide a mechanism for registering and handling URL events. Dojo provides routing with the dojo/router module.

Changes to the hash component of the URL are client-side events. When the hash component changes the page does not refresh, and the server is not notified. Using the Dojo router, we can respond to hash changes and update the state of our application.

Here are some examples of how we can use Dojo’s router to respond to hash changes. You can visit the jsfiddle here to experiment with the example.

In the example above, we register to be notified for three different path patterns. Let’s take a look at each.

Using strings

In our first example we use a string for matching a hash pattern. We use /path1/:first/:second which matches any path beginning with /path1 and followed by two child paths. The path segments of :first and :second are mapped to the params object which is passed to our callback as part of the event object.

Navigating to #/path1/foo/bar will produce an event.params object with the following structure.

{
  first: 'foo',
  second: 'bar'
}

We can also match paths using an asterisk. Using the asterisk in our path allows us to match with a form of URL globbing. The pattern /path3/*id will match /path3/glob/glob2/glob3. Any value after /path3 will be included in the params object.

Navigating to #/path3/foo/bar/baz will produce an event.params object with the following structure.

{
  id: 'foo/bar/baz'
}

With a glob match we can navigate to #/path3/baz/bar and get notified with an event.params object with the following structure.

{
  id: 'baz/bar'
}

Using regular expressions

In addition to string-based patterns, we can also use regular expressions to match paths.

The regular expression /some[0-2]path(\/\w+)/ matches paths that include /some1path/one and /some2path/two. When a path is matched by a regular expression, the event’s params object is an array of the expression’s capture groups.

When navigating to #/some1path/one our handler will be notified and the event.params will be an array containing the match.

['/one']

We can also navigate to #/some2path/two and the event.params will be an array containing the match.

['/two']

Learning more

In the examples above, we became familiar with the Dojo router and how to receive notifications of hash changes. If you would like more detailed information about the Dojo router, you can read the Dojo router tutorial.

We also cover dojo/router in depth in our Dojo 202 workshop offered throughout the US, Canada, and Europe, or at your location. We also provide expert JavaScript and Dojo support and development services, to help you get the most from JavaScript, Dojo, single-page JavaScript application architecture. Contact us to discuss how we can help.