Ember 没有 div 包装器的模板

Question

Semantic UI（一个HTML5组件库）提供了Sitebar组件，需要在<body>.

正下方有特定的页面结构

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

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

这使得使用上述站点栏和类似组件几乎无法使用。

旧的 Ember 版本也有类似的问题，但他们的答案不再有效，因为 Views 已经停用。 Ember 仍然为 "templates without wrappers" 提供私有的 _MetamorphView class，但除了它也被弃用之外，我现在不知道如何将它们合并到我的 [=16] =].

非常感谢任何帮助！

Answer 1

其实并没有你想的那么难。您只需要对 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>

编辑 - 回复评论

A sidebar can be initialized inside any element, not just a page's body.

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

Answer 2

您可以使用以下内容：

import Ember from 'ember';

export default Ember.Component.extend({

    /**
     * No default div around the element.
     */
    tagName: ''

});

Answer 3

设置空的 tagName 参数在 .hbs

{{component-name tagName=''}}

Ember 没有 div 包装器的模板

Ember template without div wrapper

javascript

ember.js

ember-cli

semantic-ui