Ember.js:依赖于路由的菜单

Question

我有一个模板，它定义了 <div id="sidemenu"><ul>...</ul></div> .它应该有一些<li> -代表一般可用菜单项的元素。在子路线上，我想添加一些仅在该路线上有意义的附加菜单条目。但由于放置 li 的 div 是在父路由模板中定义的，所以我不知道应该如何实现它。

我的第一个理论方法是调用一个返回必要的 li 的 Controller 函数。我可以在每个子 Controller 中重写此函数，但我不知道这是否是一个好的做法。

但是，如果可能的话，我想以 ember-vanilla 的方式做到这一点(有人告诉我使用一个名为“虫洞”或其他东西的插件)

Answer 1

我将使菜单的依赖部分成为一个命名导出，然后从每个路由的 renderTemplate Hook 渲染到导出中。

{{! components/sidebar/template.hbs }}
<div id="sidemenu">
  <ul>
    <li>Generally available menu item 1</li>
    {{outlet name='nav'}}
    ^^^^^^^^^^^^^^^^^^^^^
  </ul>
</div>

// thing1/route.js
renderTemplate() {
    this.render('thing1-nav-template', {into: 'nav'});
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    this._super(...arguments);
}

我想你可以使用{{ember-wormhole}}——我不知道那个模块。如果这是您的标准之一，它当然不属于“ Ember Vanilla ”类别。本质上，它允许您直接在路由模板而不是其他模板中编写 thing1-nav-template 内容。我不知道它有多稳定，所以就我个人而言，我会使用 socket 以老式的方式进行操作；这就是他们存在的目的。