The problem

Applications often need to expose a part of the app in different context without breaking the current context. The simplified example would be the "settings" modal. You want to be able to open the settings modal from everywhere in you app without losing the current context.

Let's say we have a really simple app:

Router.map(function() {
  this.route('projects', {}, function() {
    this.route('dashboard');
    this.route('tasks');
    this.route('history');
  });

  this.route('settings', {}, function() {
    this.route('notifications');
    this.route('security');
    this.route('integrations');
  });
});

when we transition from projects.tasks to settings.integrations we lose all the context from the screen because the current route is deactivated and the outlet is disconnected. We don't want that but to open the settings in a modal overlaying the current context. To achieve that we would have to do something like this:

Router.map(function() {
  this.route('projects', {}, function() {
    this.route('dashboard', function() {
      this.route('settings', {}, function() {
        this.route('notifications');
        this.route('security');
        this.route('integrations');
      });
    });
    this.route('tasks', function() {
      this.route('settings', {}, function() {
        this.route('notifications');
        this.route('security');
        this.route('integrations');
      });

    });
    this.route('history', function() {
      this.route('settings', {}, function() {
        this.route('notifications');
        this.route('security');
        this.route('integrations');
      });
    });
  });
});

We actually nested the settings routes inside every other route in the application.

Now we have two problems here:

we need to create these nested routes for every route which is unsustainable even for small apps
we need to create a route/template pair for each combination of nested routes

The solution

Integrate something we call "Branched routing" into Ember. Define a route branch which can be plucked anywhere in your route tree.

Proposed API:

Router.map(function() {

  this.branch('settings', {}, function() {
    this.route('notifications');
    this.route('security');
    this.route('integrations');
  });
  
  this.route('projects', { branches: ['settings'] }, function() {
    this.route('dashboard');
    this.route('tasks');
    this.route('history');
  });
});

Every route inside projects now has a branched settings route.

projects.tasks.settings.notifications
projects.tasks.settings.security
projects.tasks.settings.integrations
...

are all valid routes which render the "branched" part in the outlet inside the projects.tasks template thus not lossing the current context of the app while keeping the normal Ember routing and templating functionality.

Futhermore we would need a solution for route/template lookup because we don't want to have all the combinations of routes/templates.

We propose something like:

braches/settings/notifications/route.js
braches/settings/notifications/template.hbs
...

Then the lookup mechanism should know to look for the code there when inside a branched route.

All this is a high-level idea I would like to discuss with the community.

janvarljen/branched-routing.md

The problem

The solution