Ember.js 余烬应用程序模板类名

我遇到了与此类似的问题：

虽然我同意回到传统的视图插件不是一个好办法，但是我的基于引导的CSS也被包围的div打破了（确切地说，高度没有设置）

现在，实现所需功能的另一种方法是设置封闭div的

classNames

属性（如果存在），就像使用组件一样：

export default Ember.Component.extend({
    classNames: ['container']
});

这样我就可以申请身高：100%，一切都会好起来的

更新： 问题不在于组件的封闭div的样式，而在于主应用程序模板的行为方式。让我澄清一下：

application.hbs：

{{outlet}}

其中呈现了路线模板，例如map.hbs：

{{#tab-navigation-container}}    
    {{top-nav}}

    {{tab-contentpane model=model}}

    {{tab-navigation map=true}}
{{/tab-navigation-container}}

现在，

components/tab navigation container.js

将封闭的div转换为包含容器CSS类：

import Ember from 'ember';

export default Ember.Component.extend({
    classNames: ['container']
});

但是，呈现的HTML如下所示：

因此，application.hbs似乎在组件周围放置了另一个div，我正在寻找一种方法来

• 删除它（如上面链接中所述，只能通过传统视图插件实现）或
• 对其应用类名

---

能做到吗？谢谢

您应该将标记名和类名设置为最外层的元素——这将保持样式的一致性。例如，假设您最初有：

<section class="container col-md-6">
  <div class="col-sm-12 test">
     <p>some content...</p>
     ...
  </div>
</section>

然后，模板可以排除外部节包装

<div class="col-sm-12 test">
   <p>some content...</p>
   ...
</div>

一些内容

...

确实没有理由使用组件破坏CSS。您可以设置之前使用的所有相同的类和标记，CSS应该呈现相同的结果

---

如果我误解了你的问题，请告诉我。

好吧，这与其说是一个实际的解决方案，不如说是一个丑陋的破解，但目前它确实起到了作用。在重写组件的

didInsertElement

事件时，我又回到了普通的jQuery DOM操作：

export default Ember.Component.extend({
    setupFunc: function () {    

         $('#tab-navigation-container').unwrap();

    }.on('didInsertElement')
});

---

其中，

选项卡导航容器

是组件的ID。

在Ember 2.7及以下版本中，您可以通过修改Ember应用程序来控制顶级标记（甚至不呈现它）及其CSS类，如下所示：

// app/app.js

App = Ember.Application.extend({
  ApplicationView: Ember.Component.extend({
    classNames: ['my-custom-classname'],
    // Or to omit the tag entirely:
    tagName: '',
  }),
  // ...
});

如图所示

---

这不需要任何黑客或传统插件。

谢谢！我添加了更多的代码来澄清！

// app/app.js

App = Ember.Application.extend({
  ApplicationView: Ember.Component.extend({
    classNames: ['my-custom-classname'],
    // Or to omit the tag entirely:
    tagName: '',
  }),
  // ...
});