如何在Ember应用主模板中指定命名区块并在路由模板重写？

当然可以啦！你提到的这种在根模板（application.hbs）中定义命名区块，再在路由模板中重写对应内容的方式，在Ember里是完全支持的，而且是构建可复用布局的常用技巧。

具体实现步骤 #

1. 在application.hbs中定义命名区块

首先在你的根模板里设置好布局结构，用{{yield "区块名称"}}标记出可被重写的区域：

<div id="main-content">{{outlet}}</div>
<div id="bottom-panel">{{yield "bottom-panel"}}</div>

这里的{{yield "bottom-panel"}}就相当于给底部面板预留了一个“插槽”，子路由的模板可以针对性地填充内容。如果没有子模板提供内容，这个区域会默认显示为空（你也可以后续加默认内容，后面会提到）。

2. 在路由模板中重写命名区块

假设你有一个posts路由，对应的模板posts.hbs可以这样写，用块级的{{#yield "bottom-panel"}}来填充根模板里的同名区块：

{{!-- 这部分内容会渲染到application.hbs的{{outlet}}中 --}}
<h1>我的博客文章列表</h1>
<ul>
  {{#each @model as |post|}}
    <li>{{post.title}}</li>
  {{/each}}
</ul>

{{!-- 重写bottom-panel区块的内容 --}}
{{#yield "bottom-panel"}}
  <div class="custom-bottom-panel">
    <p>这是Posts页面专属的底部面板内容</p>
    <button>加载更多文章</button>
  </div>
{{/yield}}

当用户访问/posts路由时，application.hbs里的#bottom-panel区域就会被上面这段自定义内容替换掉。如果某个路由模板没有定义这个命名区块，那根模板里的bottom-panel就会保持默认状态（空或者你设置的默认内容）。

进阶技巧：添加默认内容 #

如果你想给命名区块设置默认显示内容（当子模板没有重写时展示），可以用Ember的has-block助手来判断：

<div id="bottom-panel">
  {{#if (has-block "bottom-panel")}}
    {{yield "bottom-panel"}}
  {{else}}
    <p>这是全局默认的底部面板内容</p>
  {{/if}}
</div>

这样一来，没有重写该区块的路由页面就会显示这段默认内容，灵活性更高。

内容的提问来源于stack exchange，提问作者Caterina Novak