ember 应用模板类名 | 应用模板类名

本文介绍了ember 应用模板类名的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

删除它(这只能通过旧版视图插件实现，如上面的链接中所述)或
为它应用一个 className.

能做到吗?谢谢！

解决方案

在 Ember 2.7 及以下版本中，您可以通过如下修改您的 Ember 应用程序来控制顶级标签(甚至不渲染它)及其 CSS 类:

//app/app.jsApp = Ember.Application.extend({ApplicationView: Ember.Component.extend({classNames: ['my-custom-classname'],//或者完全省略标签:标签名称: ''，}),//...});

如这个讨论.

这不需要任何黑客或遗留插件.

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 应用模板类名的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！