Ember template without div wrapper

语义UI（HTML5组件库）提供Sitebar组件，它需要直接在<body>之下的特定页面结构。Ember template without div wrapper

由于Ember引入了HTMLBars，所以在将其注入DOM之前，它会将所有模板的内容封装在另一个<div>标签中，例如，

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

这使得使用上述Sitebar和类似的组件几乎不可用。

对于较老的Ember版本，也有类似的问题，但他们的答案不再有效，因为Views已经退役。 Ember仍然为“没有包装的模板”提供私人_MetamorphView类，但除了它也被弃用的事实之外，我现在不会如何将它们合并到我的Route中。

任何帮助，非常感谢！

来源

2015-09-14 Phil Rykoff

PS：我甚至会复活好老的Metamorph script标签！（： –

）如果这是一个Ember组件，你可以将'tagName：“”'放在组件的.js文件中，它不会在你的模板周围生成一个div，最终你不需要这样做，但这是现在的解决方法 –

这实际上并不像你想象的那么难。所有你需要的是在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

来源

2015-09-14 12:18:43

谢谢！:-)这是我的理解，路线的模板（其中可能包括组件），例如'application.hbs'，在导入到index.html时已经被封装在div中。有没有一种方法可以避免这种情况，或者直接将组件包含到'index.html'中以便从您的解决方案中受益？ –

检查我的编辑@PhilRykoff –

您的编辑为我工作，再次感谢！ –

您可以使用以下方法：

import Ember from 'ember'; 
 

 
export default Ember.Component.extend({ 
 

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

 
});

来源

2016-09-12 06:53:28 Sabo

Ember template without div wrapper

回答

相关问题