Ember JS Index路线

Question

有人可以更好地解释一下Ember JS中隐含的索引路径和控制器吗？

看到这个例子,为什么这两个例子的行为不同？

索引路由明确定义

http://jsbin.com/ILAP/1/

隐含指数路线

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

让我困惑的是为什么嵌套行为在第二个例子中起作用而不是在第一个例子中起作用.

Answer 1

这是学生/学生的路线结构:

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

第一个案例

索引路由明确定义

模板:

<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>

当你转换到student.index,首先是附加student模板和之后student/index.因为您没有覆盖默认约定,通过renderTemplate.呈现模板的位置是{{outlet}}父路径模板的主出口(无名称出口).因此student模板将插入students主插座.不students/index,因为它是兄弟姐妹.这就是为什么所有内容都被替换的原因.并将student/index插入student

第二种情况

隐含指数路线

模板:

<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>   

这次,与前一个示例一样,模板的分辨率不会改变.但这次我们没有了student/index.所以首先student在students出口处,因为student/index缺少它,它被忽略了.最终结果是您期望的模板.

摘要

使用默认约定.模板将在父级路由模板中呈现,而不是同级父模式.