Nested Sub-routes are Broken

[marksalpeter]

Im using eager loading with sub routes. I made a new ember cli project to demo the bug:

https://github.com/marksalpeter/ember-nested-subroutes-bug.git

In the example, the foo and /foo/bar routes work as expected but the foo/bar/baz route doesn't render the correct loading template or automatically fallback to templates/foo/bar/baz/index.hbs when templates/foo/bar/baz.hbs isn't found. If you change templates/foo/bar/baz/index.hbs to templates/foo/bar/baz.hbs baz will render, but templates/foo/bar/baz/loading.hbs will not be used for its loading state.

Let me know if there's anything else I can do to help debug.

[pixelhandler]

@marksalpeter I think the issue you ran into is not documented well:

Instead of:

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

Use a function with this.route so you can use the index and loading templates.

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

See: marksalpeter/ember-nested-subroutes-bug#1

[rwjblue]

@pixelhandler - Thanks for investigating and sending a PR showing the solution!

[marksalpeter]

Thanks!

On Jul 31, 2015, at 7:07 PM, Bill Heaton notifications@github.com wrote:

@marksalpeter https://github.com/marksalpeter I think the issue you ran into is not documented well:

Instead of:

Router.map(function() {
this.route('foo', function() {
this.route('bar', function() {
this.route('baz');
});
});
});
Use a function with this.route so you can use the index and loading templates.

Router.map(function() {
this.route('foo', function() {
this.route('bar', function() {
this.route('baz', function() {});
});
});
});
—
Reply to this email directly or view it on GitHub #11888 (comment).