ember应用程序模板类名

问题描述

我有一个类似的问题：

所以，似乎application.hbs在组件周围放置另一个div，我正在寻找一种方式来

• 删除它（只能通过旧版视图插件实现，如上面链接中所述）或


• 应用className

可以做吗？谢谢！

解决方案

在Ember 2.7及更低版本中，您可以控制顶级标签（甚至不渲染） CSS类通过修改您的Ember应用程序如下：

  // app / app.js 
 
应用程序= Ember.Application.extend（{
 ApplicationView：Ember.Component.extend（{
 classNames：['my-custom-classname']，
 //或者完全省略标签： 
 tagName：''，
}），
 // ... 
}）; 
  

如。 / p>

这不需要任何黑客或旧版插件。

I'm having a similar problem to this one:

Setting tagName on application template in ember js

While I agree that falling back to a legacy view addon can't be the way to go, here too my bootstrap-based CSS is broken by the enclosing div (the height being not set, to be precise).

Now a different way to achieve what I need is to set the enclosing div's classNames property (if it exists), like it can be done with a component:

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

Thus I could apply height:100%, and everything would be fine.

Update:The problem is not the styling of the enclosing div of a component, but the way the main application template behaves. Let me clarify:

application.hbs:

{{outlet}}

Therein is rendered a route's template, e.g. map.hbs:

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

    {{tab-contentpane model=model}}

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

Now, components/tab-navigation-container.js transforms the enclosing div to include the container CSS class:

import Ember from 'ember';

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

However, the rendered HTML looks like this:

So, seemingly application.hbs puts another div around the component, and I'm looking for a way to either

• remove it (which can only be achieved by a legacy view addon, as explained in the link above) or
• apply a className to it.

Can it be done? Thanks!

解决方案

In Ember 2.7 and below, you can control the top-level tag (even not rendering it), and its CSS classes by modifying your Ember Application as follows:

// app/app.js

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

As seen in this discussion.

This does not require any hacks or a legacy plugin.

这篇关于ember应用程序模板类名的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！