Router: a proper structure


#1

Hi guys,

I have to create following URL structure:

  • /domain - list of objects
  • /domain/1 - object overview
  • /domain/1/server - object’s server details
  • /domain/1/network - objects’s network details
  • /domain/1/network/manage - object’s network managing

Is it okay that my router’s config looks like that? I have concerns about ‘domain.details.network’ resource.

    App.Router.map(function() {
	this.resource('domain', function () {
		this.route('create');
		this.resource('domain.details', { path: ':domain_id' }, function () {
			this.route('server');
			this.resource('domain.details.network', { path: 'network' }, function () {
				this.route('manage');
			});
		});
	});
});

#2

You don’t need to specify the whole structure (domain.details.network), so this would be fine:

    App.Router.map(function() {
      this.resource('domain', function () {
        this.route('create');

        this.resource('details', { path: ':domain_id' }, function () {
          this.route('server');

          this.resource('network', function () {
            this.route('manage');
          });
        });
      });
    });

But usually it’s a good idea to put the list at the same level as the individual, so something like this:

    App.Router.map(function() {
      this.resource('domain', function () {
        this.route('create');
      });

      this.resource('details', { path: '/domain/:domain_id' }, function () {
        this.route('server');

        this.resource('network', function () {
          this.route('manage');
        });
      });
    });

This way, you don’t first have to visit the ‘all’ route, to get to the single item. This saves on server calls/resources. It would also allow you to do some nicer workflows with the UI.


#3

I’ve followed your advice but got an error: http://jsfiddle.net/PUQ2D/

Click on ‘Domains’ link causes: Assertion failed: The attempt to link-to route ‘domain.details.index’ failed. The router did not find ‘domain.details.index’ in its possible routes: ‘domain.create’, ‘details.index’, ‘details.server’, ‘network.manage’, ‘network.index’, ‘domain.index’, ‘index’

However, Ember docs have some info on definition of the whole structure of the deeply nested resources. Thus, it seems that Ember’s Router was designed to implement 2-level URL structure :grin:


#4

My app has various ‘details’ routes for each object and I thought that Router would solve that ‘nested resources’ task easily. Unfortunately, it doesn’t :smile:


#5

When defining a resource, you always refer to it as the top route, so you would say transitionTo('details') or transitionTo('details.index') (these two forms are equivalent, since transitioning to the resource always transitions to its index).

This allows you to have complex routes, but not have to write out the whole route hierarchy.


#7

I believe that routes should be nested when you have nested templates !!! It works out most of the cases. Do not nest your routes just because of the urls. URLs like /domain/1/server can be achieved even using path