Search⌘ K
Home
Courses
Introduction to Marionette.js – The Backbone Framework

Adding a Router to ContactsApp

Explore how to implement routing in Marionette.js for the ContactsApp. Learn to create a router that manages URL routes, triggers controller actions, and uses Backbone's history and pushState to enable dynamic navigation and maintain application state. This lesson helps you add efficient routing for improved user experience.

We'll cover the following...

Creating a new file for the router

Now that we have a better idea of how routing should be used, let’s add a router to our ContactsApp by creating a new file:

Node.js
ContactManager.module("ContactsApp", function(ContactsApp, ContactManager,
Backbone, Marionette, $, _){
  ContactsApp.Router = Marionette.AppRouter.extend({
    appRoutes: {
      "contacts": "listContacts"
    }
  });
  var API={
    listContacts: function(){
      console.log("route to list contacts was triggered");
    }
  };
  ContactsApp.on("start", function(){
    new ContactsApp.Router({
      controller: API
    });
  }); 
});

In the module callback in line 1, we define the router within the ContactsApp module because it will handle the routes for all the submodules attached to ContactsApp (such as List, Show, etc.). In line 3, we attach a Router instance containing an appRoutes object associating the URL fragments on the left with callback methods on the right.

Next, we define public methods within an API object in lines 9–13, which is provided to the router during instantiation in line 17. Note that the callback function, e.g., listContacts, specified in the appRoutes object above must exist in the router’s controller. In other words, all the callbacks used ...