Question

我遇到了一个问题，我确信开发人员在使用Ember 2.x并尝试执行整页div之前必定会遇到这个问题。

在Ember的旧时代，您可以使用以下语法覆盖class等视图属性：

var ApplicationView = Ember.View.extend({
    classNames: ['container'],
    ...
});

module.exports = ApplicationView;

在Ember 2.x中，视图的概念现已弃用，但组件的概念要求您在组件名称中使用-，这显然不会覆盖您的{ {1}}或application核心观点。

我解决此问题的方法是在我的应用程序中保留index结构，但更改为：

views/application.js

这样可行，但感觉......很脏？有没有人遇到或知道更多的官员＆＃34;这样做的方式，因为我不能成为唯一一个试图在Ember 2.x中创建整页div并因此需要将css应用于应用程序级div的人。

Answer 1

recommended way to do this is to use an extra element in the template，在应用程序控制器中具有任何必要的逻辑或计算属性。

例如，如果您想要一个取决于路线名称的类名，您可以在ApplicationController中计算出来：

currentPathClassName: Ember.computed('currentPath', function() {
  let currentPath = this.get('currentPath').replace(/\./g, '-');
  return `${currentPath}-route`;
})

然后在您的application.hbs模板中

<div class={{currentPathClassName}}>
  {{outlet}}
</div>

这将导致额外的嵌套div，但我无法想到会导致问题的任何情况。

覆盖＆＃34;查看＆＃34; Ember 2.x核心组件中的级别属性

1 个答案: