没有 div 包装器的 Ember 模板答案

【问题标题】：Ember template without div wrapper没有 div 包装器的 Ember 模板
【发布时间】：2015-09-14 00:45:21
【问题描述】：

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 仍然为“没有包装器的模板”提供私有 _MetamorphView 类，但除了它也已被弃用之外，我现在不知道如何将它们合并到我的 Route 中。

非常感谢任何帮助！

【问题讨论】：

PS：我什至会复活好的旧变形脚本标签！ (:
如果这是一个 Ember 组件，您只需将 tagName: "" 放在组件 .js 文件中，它就不会在您的模板周围生成 div。最终您不必这样做，但这是目前的解决方法。

标签： javascript ember.js ember-cli semantic-ui

【解决方案1】：

您可以使用以下内容：

import Ember from 'ember';

export default Ember.Component.extend({

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

});

【讨论】：

【解决方案2】：

设置空的tagName参数在.hbs中

{{component-name tagName=''}}

【讨论】：

【解决方案3】：

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

【讨论】：

谢谢！ :-) 我的理解是路由的模板（其中可能包含组件），例如application.hbs，在导入index.html 时已经被包裹在上述 div 中。有没有办法绕过这个或直接将组件包含到index.html 中以便从您的解决方案中受益？