ember应用程序模板classname

Question

我遇到类似的问题：

Setting tagName on application template in ember js

虽然我同意回归遗留视图插件无法实现，但我的基于bootstrap的CSS也被封闭的div打破（确切地说，未设置高度）。

现在，实现我需要的另一种方法是设置封闭div的classNames属性（如果存在），就像可以使用组件一样：

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

因此我可以申请height: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，而我正在寻找一种方法

• 删除它（只能通过遗留视图插件实现，如上面链接中所述）或
• 将className应用于它。

可以吗？谢谢！

Answer 1

您应该将tagName和classNames设置为最外层的元素 - 这将保持一致的样式。例如，最初你说：

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

您可以像这样创建组件：

export default Ember.Component.extend({
    tagName: 'section',
    classNames: ['container', 'col-md-6']
});

然后您的模板可以排除外部部分包装器

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

真的没有理由为什么你的CSS应该被使用组件打破。您可以设置之前使用的所有相同类和标记，CSS应该呈现相同的内容。

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

Answer 2

好吧，这更像是一个丑陋的黑客，而不是一个真正的解决方案，但目前它可以解决问题。我重写了普通的jQuery DOM操作，同时覆盖了组件的didInsertElement事件：

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

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

    }.on('didInsertElement')
});

其中tab-navigation-container是组件的ID。

Answer 3

在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: '',
  }),
  // ...
});

如this discussion中所示。

这不需要任何黑客攻击或遗留插件。