覆盖 Ember 2.x 核心组件中的“视图”级别属性答案

【问题标题】：Overriding "view" level properties in Ember 2.x core components覆盖 Ember 2.x 核心组件中的“视图”级别属性
【发布时间】：2016-02-20 18:15:16
【问题描述】：

我确信开发人员在使用 Ember 2.x 并尝试进行整页 div 时遇到过一个问题。

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

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

module.exports = ApplicationView;

在 Ember 2.x 中，视图的概念现已弃用，但组件的概念要求您在组件名称中使用 -，这显然不适用于覆盖您的 application 或 @ 987654325@核心意见。

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

import 'Ember' from ember;

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

这行得通，但只是感觉……脏？有没有人遇到或知道这样做的更“官方”方式，因为我不能是唯一一个试图在 Ember 2.x 中制作整页 div 并因此需要将 css 应用于应用程序的人-level div。

【问题讨论】：

标签： javascript css ember.js

【解决方案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，但我想不出任何会导致问题的情况。

【讨论】：