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缺失，所以会被忽略。最终结果是您期望的模板。

<强>摘要

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

Ember JS Index路线

1 个答案: