Question

语义用户界面（HTML5组件库）提供Sitebar组件，该组件需要HtmlBody正下方的特定页面结构。

由于Ember引入了HTMLBars，它会将所有模板的内容包装在另一个ImapClientDemo标记内，然后将其注入DOM，例如。

<body>

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

对于较旧的Ember版本也有类似的问题，但由于<div>已经退役，他们的答案不再适用了。 Ember仍为“没有包装器的模板”提供私有_MetamorphView类，但除了它也被弃用之外，我现在还不知道如何将它们合并到我的<div id="ember389" class="ember-view"></div>中。

非常感谢任何帮助！

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>

编辑 - 回答评论

可以在任何元素内部初始化侧边栏，而不仅仅是页面的正文。

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=''}}

没有div包装的Ember模板

3 个答案: