CODEWITHSUNDEEP
javascriptember.js
Gordon Potter
Gordon Potter

Reputation: 5862

Ember JS Index routes

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.com/ILAP/1/

The index route is implied

http://jsbin.com/ILAP/2/

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

Upvotes: 10

Views: 3203

Answers (1)

Marcio Junior
Marcio Junior

Reputation: 19128

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.

Upvotes: 8

Related Questions