没有div包装的Ember模板

Question

Semantic UI (a HTML5 component library) provides the Sitebar component, which needs a specific page structure directly below <body> . 语义UI（HTML5组件库）提供Sitebar组件，它需要在<body>正下方的特定页面结构。

Since Ember introduced HTMLBars, it wraps all templates' content within another <div> tag before injecting it into the DOM, eg 由于Ember引入了HTMLBars，它将所有模板的内容包装在另一个<div>标签中，然后将其注入DOM，例如

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

which makes using the above mentioned Sitebar and comparable components virtually unusable. 这使得使用上述Sitebar和类似组件几乎无法使用。

There have been similar questions for older Ember versions, but their answers do not work anymore, as Views have been retired. 对于较旧的Ember版本，也存在类似的问题，但由于Views已经退役，因此它们的答案不再适用。 Ember still provides the private _MetamorphView class for "templates without wrappers", but besides the fact that it is also deprecated, I don't now how to incorporate them into my Route . Ember仍为“没有包装器的模板”提供私有_MetamorphView类，但除了它也被弃用之外，我现在还不知道如何将它们合并到我的Route 。

Any help is greatly appreciated! 任何帮助是极大的赞赏！

Answer 1

It's actually not that much hard as you think. 它实际上并没有你想象的那么难。 All you need is to make some slight changes in the component . 您只需要在组件中进行一些细微的更改。 (Assume you're using Ember 2.x and want to make side bar as component) （假设您正在使用Ember 2.x并希望将侧栏作为组件）

For Eg. 对于Eg。

// 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>

If the side bar isn't necessary to be a component, then it'll be lot simpler 如果侧栏不是必须的组件，那么它会简单得多

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

EDIT - answer to the comment 编辑 - 回答评论

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 http://semantic-ui.com/modules/sidebar.html#using-a-custom-context

Answer 2

You can use the following: 您可以使用以下内容：

 import Ember from 'ember'; export default Ember.Component.extend({ /** * No default div around the element. */ tagName: '' });

Answer 3

在.hbs中设置空tagName参数

{{component-name tagName=''}}

没有div包装的Ember模板

问题描述

3 个解决方案

解决方案1
4 已采纳 2015-09-14 12:18:43

解决方案2
3 2016-09-12 06:53:28

解决方案3
0 2018-10-31 05:54:14

没有div包装的Ember模板

问题描述

3 个解决方案

解决方案1 4 已采纳 2015-09-14 12:18:43

解决方案2 3 2016-09-12 06:53:28

解决方案3 0 2018-10-31 05:54:14

解决方案1
4 已采纳 2015-09-14 12:18:43

解决方案2
3 2016-09-12 06:53:28

解决方案3
0 2018-10-31 05:54:14