javascript - 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. 所以首先呈现studentinstudents出口，之后因为student/index缺少，它被忽略。最终结果是您期望的模板。

概括

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