Introduction to Marionette.js – The Backbone Framework/

...

/

Adding a Router to ContactsApp

Adding a Router to ContactsApp

Learn how to add routers to our application. Get a brief introduction to pushState.

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:

Press + to interact
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 ...