How to properly generate resources and routes with Ember CLI

Question

I'm trying to define a resource and route like this with Ember CLI.

    this.resource('events', function() {
        this.route('view', { path: "/:id"})
    });

If I try this: ember g resource events/view I get this:

this.resource('events/view', { path: 'events/views/:events/view_id' });

If I try this: ember g resource events and: ember g resource events/view

this.resource('events', { path: 'events/:events_id' });
this.resource('events/view', { path: 'events/views/:events/view_id' });

If I try this: ember g resource events and: ember g route events/view

this.resource('events', { path: 'events/:events_id' });
this.route('events/view');

Is there a way to do this?

Answer 1

At this time, nested resources and routes in the pattern that you desire, are not automatically generated with the default blueprints found in Ember CLI. The default blueprints generate skeletal files and file structure, and some use their afterInstall hook to update other files. Following these default blueprints, you are properly generating these items:

    ember g resource events
    ember g route events/view

You could then modify Router.map in router.js with your intended nesting:

    Router.map(function() {
      this.resource('events', function() {
        this.route('view', { path: "/view/:id" });
      })
    });

You should now be able to hit 'events/view/1' in your browser, and see the routes you've been looking for in the Ember Inspector's Routes tab.

Alternatively, you could execute the following, and generate a custom blueprint:

    ember generate blueprint nested-resource-route

A blueprint directory will be created in your project root, with your new blueprint inside. Using the resource and route blueprints as a foundation, you could roll your own generator to accomplish what you are seeking.

Answer 2

The behavior you want is possible in ember-cli 0.1.5 and later. From the release notes:

#2748 improved the router generator to support properly nested routes and resources, previously if you had a route similar like:

Router.map(function() {
  this.route("foo");
});

And you did ember g route foo/bar the generated routes would be

Router.map(function() {
  this.route("foo");
  this.route("foo/bar");
});

Now it keeps manages nested routes properly so the result would be:

Router.map(function() {
  this.route("foo", function() {
    this.route("bar");
   }); 
});

Additionally the option --path was added so you can do things like ember g route friends/edit --path=:friend_id/id creating a nested route under friends like: this.route('edit', {path: ':friend_id/edit'})