Question

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

我的第一个理论方法是调用控制器函数，该函数返回必要的li。我可以在每个子控制器中覆盖此功能，但我不知道这是不是很好的做法。

但是，如果可能的话，我想以ember-vanilla的方式做这件事（有人告诉我使用一个名为＆＃34;虫洞＆＃34;或其他东西的插件）

Answer 1

我会将菜单的相关部分设为指定的插座，然后从每个路径的renderTemplate挂钩渲染到插座中。

{{! 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}}我想 - 我不知道那个模块。它当然不属于＆＃34; ember vanilla＆＃34;如果那是你的标准之一。从本质上讲，它允许您直接在路径模板中编写thing1-nav-template内容而不是其他模板。我不知道它有多稳定，所以我个人用传统的方式来做这件事;这是他们在那里的目的。

Answer 2

您可以使用https://github.com/yapplabs/ember-wormhole将内容从一个模板呈现为由ID标识的HTML元素。

菜单模板：

<ul>
  <li>General stuff</li>
</ul>
<ul id='foobar' />

子路径模板：

{{#ember-wormhole to="foobar"}}
  <li>Subroute stuff</li>
{{/ember-wormhole}}

Ember.js：路径相关菜单

2 个答案: