[SOLVED] Ember Guide - Why are TodosRoute & TodosIndexRoute needed?

1

The new Getting Started guide is really great! A co-worker and I just finished it. He deleted the TodosRoute at the point it asks to add TodosIndexRoute, and for some reason, the completed and remaining properties in TodosController stopped working (filterProperty always returned an empty array).

We were wondering, why does that happen? Shouldn’t TodosIndexRoute be enough for everything to work?

Thanks!

2

Not sure why it’s not working in this context, might be using the properties in the todos/index template. As I understand it, the concept is that the index template will be rendered in the outlet, and the Todos template will be rendered and a container for whatever template is displayed in the outlet.

So if you want something to always be shown when you are in the /todos path , like a header and some nav stuff, put it in the todos template (which uses the TodosRoute and TodosController).

If you want some stuff that will get swapped out with a new template when you change the URL to a nested route, like ‘/todos/complete’ or something (which uses the TodosCompleteRoute and TodosCompleteController). You put the stuff that gets swapped out into the todos/index template (which uses the TodosIndexRoute and TodosIndexController).

1 Like
3

Thanks for the explanation, @pholloway.

Ok, so I think I understand why this is happening:

The completed and remaining properties are defined in the TodosController, and they refer to that controller’s model, which gets set in TodosRoute. Without that route, TodosController has no model, so the properties don’t work.

Wouldn’t it be best then for TodosIndexRoute to refer to TodosRoute’s model instead of loading all the todos again? How would one go about doing that?

4

Try this:

model: function(){
  this.modelFor('todos')
}

although, i’ve also see setupController hooks do the same thing. I’ve seen explainations of when each of those hooks are used. It said elsewhere you can only use the model hook on routes activated by a dynamic segment in the URL.

Anyone know what the best practices are and when to use each? I have yet to find a good explanation.

EDIT:

After some brief digging, I found there’s some good discussion here that might give some nice insights. https://github.com/emberjs/ember.js/pull/2703

5

That code worked perfectly, thanks!