javascript - 没有div包装器的Ember模板

语义UI(HTML5组件库)提供了Sitebar组件，该组件需要在<body>正下方的特定页面结构。

自从Ember引入HTMLBars以来，它先将所有模板的内容包装在另一个<div>标记中，然后再将其注入(inject)DOM中，例如

<div id="ember389" class="ember-view"><!-- original template's content comes here --></div>

因此使用上述Sitebar和类似组件几乎无法使用。

对于较早的Ember版本也有类似的问题，但由于Views已淘汰，因此它们的答案不再起作用。 Ember仍然为“没有包装器的模板”提供专用的_MetamorphView类，但是除了不赞成使用的事实之外，我现在不介绍如何将它们合并到我的Route中。

任何帮助是极大的赞赏!

最佳答案

实际上，这并不像您想的那么难。您需要做的只是对component进行一些细微更改。 (假设您使用的是Ember 2.x，并且希望将侧栏作为组件)

例如

// app/components/side-bar.js
export default Ember.Component.extend({
    classNames: ['ui', 'sidebar']
});

// app/templates/components/side-bar.hbs
{{yield}}

// usage
// app/templates/application.hbs
{{#side-bar}}
    // your sidebar contents go here
{{/side-bar}}
<div class="pusher">
    // Your site's actual content
    {{outlet}}
</div>

如果没有必要将侧边栏作为组件，那么它将变得更加简单

// app/templates/application.hbs
<div class="ui sidebar">
  // ...
</div>
<div class="pusher">
  // Your site's actual content
  {{outlet}}
</div>

编辑-评论的答案

http://semantic-ui.com/modules/sidebar.html#using-a-custom-context