Can Marionette manage routes?

Question

I'm new to Marionette (though not to Backbone), and have decided to use it to manage my routing. Suppose I have the following situation:

var AppRouterController = {
  //Route to the homepage
  home: function() {
    //Unload the existing route, and load this one instead
  },
  //Route to a user profile page
  user: function() {
    //Unload the existing route, and load this one instead
  },
  //Route to a list of tasks or something
  tasks: function() {
    //Unload the existing route, and load this one instead
  },
};

var TheRouter = new Marionette.AppRouter({
  controller: new AppRouterController(),
  appRoutes: {
    "home": "home",
    "user/:id": "user",
    "tasks/:date": "tasks"
  }
});

I would like for my app to load each new route dynamically, and completely remove its predecessor from the DOM (probably via an animation where, at least for a little bit, they will share screen space). I can see my app having two regions: the "navbar", and the "content" (the area where the information from a given route is rendered"):

<html>
  <body>
    <section region="navbar"></section>
    <section region="content" id="home|user|tasks|whateverRoute"></section>
  </body>
</html>

So, my DOM body would always have two children: the navbar region section, and the content region section for whatever the current active route in Marionette is. What would be the best way to manage this process in Marionette? By that I mean, only grabbing the modules in a particular route when they are needed (rather than grabbing them all on load), creating a new "content" region, and replacing the existing "content" region in a smooth manner.

Vahan Vardanyan Vahan Vardanyan · Accepted Answer · 2014-10-08T08:06:00

Use App.content.show(yourViewInstance(params)) and use some kind of loading bar when switching between route. Example:

var app = new Marinoette.Application.extend({
    showLoadingBar: function() {// your loadingBar logic here},
    hideLoadingBar: function() {// your loadingBar logic here},
    onRoute: function () {
       this.showLoadingBar();
       // other things needed to be done here
    }
}); 

app.addRegions({
  navigation: "#navbar",
  content: "#content"  
});

var AppRouterController = {
  //Route to the homepage
  home: function() {
    //Unload the existing route, and load this one instead
    // require app here to access regions via require.js or in other way.
    app.content.show(yourHomeViewInstance(collection_or_model_or_other_param));   
    app.hideLoadingBar();
  },
  //Route to a user profile page
  user: function(id) {
    //Unload the existing route, and load this one instead
    app.content.show(yourUserViewInstance(collection_or_model_or_other_param));
    app.hideLoadingBar();
  },
  //Route to a list of tasks or something
  tasks: function(date) {
    //Unload the existing route, and load this one instead
    app.content.show(yourTasksViewInstance(collection_or_model_or_other_param));
    app.hideLoadingBar();
  },
};

var TheRouter = new Marionette.AppRouter({
  controller: new AppRouterController(),
  appRoutes: {
    "home": "home",
    "user/:id": "user",
    "tasks/:date": "tasks"
  }
});

app.on('route', app.onRoute, app);

app.on('start', function () {
    Backbone.history.start();
})


app.start();

app.region.show will manage rerendering (closing old view and attaching new one) processes.

Any time you will navigate somewhere Marionette.Router will trigger 'route' event, and app.onRoute will be called (Marionette.Router has it's own onRoute method that could be useful for other cases) which will manage LoadingBar functionality (will show it) and in controller's action, after view has been shown, your will hide loading bar.

This could be the simplest boilerplate for your issue. Hope it helps.

Update

Html from server:

<!DOCTYPE html>
<html>
<head>
  //Head content here
</head>
<body>
  <nav id="navbar"></nav>
  <div id="content"></div>
</body>
</html>

After Marionette.Application has started, it will "attach" regions, and then you can manage your views in that regions.

Can Marionette manage routes?

1 Answers