Can someone better explain with is going on with the implied index route and controllers in Ember JS?

See this example, why is the behavior different in these two examples?

Index route explicitly defined

/

The index route is implied

/

What is confusing to me is why the nesting behavior works in the second example but not the first.

Can someone better explain with is going on with the implied index route and controllers in Ember JS?

See this example, why is the behavior different in these two examples?

Index route explicitly defined

http://jsbin./ILAP/1/

The index route is implied

http://jsbin./ILAP/2/

What is confusing to me is why the nesting behavior works in the second example but not the first.

• javascript
• ember.js

1 Answer 1

This is the students/student route structure:

students
----index
----student
--------index

First case

Index route explicitly defined

Templates:

<script type="text/x-handlebars" data-template-name="students">
  {{ outlet }}
</script>    

<script type="text/x-handlebars" data-template-name="students/index">  
  ... omitted ...
  <div class="well">
    Expecting to render student template here:
    <br />
    {{ outlet }}
  </div>

</script>  

<script type="text/x-handlebars" data-template-name="student">
  <h2>Student</h2>
  <h3>{{name}}</h3>
  <h4>{{grade}}</h4>
  <h4>{{gpa}}</h4>
</script>

When you make a transition to student.index, first is appended the student template and after student/index. Because you dont have override the default conventions, via renderTemplate. The place where the template is rendered, is into the main outlet (an outlet without name) aka {{outlet}}, of the parent route template. So student template will be inserted in the students main outlet. Not students/index, because it's the sibling. This is the reason why all your content is replaced. And the student/index will be inserted in student

Second case

The index route is implied

Templates:

<script type="text/x-handlebars" data-template-name="students">
  ... omitted ...
  <div class="well">
    Expecting to render student template here:
    <br />
    {{ outlet }}
  </div>

</script>  

<script type="text/x-handlebars" data-template-name="student">
  <h2>Student</h2>
  <h3>{{name}}</h3>
  <h4>{{grade}}</h4>
  <h4>{{gpa}}</h4>
</script>   

This time, like the previous sample, the resolution of the templates don't change. But this time we don't have the student/index. So first is rendered the student in students outlet, after because the student/index is missing, it's is ignored. The final result is the template where you expect.

Summary

Using the default conventions. Templates will be rendered in the parent, not sibling, parent route template.