路由器的一部分页面

Question

视图＆lt; - ＆gt; URL匹配对，实际上是指路由器必须控制整个页面而不能用于控制页面的子集？我有一种情况，其中Ember用于页面的一部分，其中最外面的容器视图被手动添加到DOM元素。解决方法是将整个页面转换为Ember，但也许有其他方法？感谢您的任何指示！

Answer 1

您可以指定outlets插入页面的动态部分。插座呈现当前视图。在该视图中，可以有另一个出口来显示子视图。

见这个例子：

申请模板

<div id="content">
  <nav> .. menu part .. </nav>
  {{outlet}}
</div>

这会呈现您应用的动态部分。当您浏览到例如/pages时，您可以在其中显示页面列表。当您转到'/ pages / 1'时，{{outlet}}模板中有一个pages，它会呈现page - 模板。

页面模板

<ul>
{{#each page in controller}}
  <li>{{#linkTo page}}{{page.name}}{{/linkTo}}</li> 
{{/each}}
</ul>
{{outlet}}

页面模板

<h2>{{name}}</h2>

页面名称标题现在呈现在页面列表下方 这样您就可以根据需要添加尽可能多的动态内容。