Ember JS索引路由

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 。 因此，首先在students插座中呈现student ，然后由于缺少student/index ，将其忽略。 最终结果是您期望的模板。

摘要

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