Переопределение свойств уровня «вид» в компонентах Ember 2.x core

Question

Я столкнулся с проблемой, с которой, как я уверен, разработчики должны были сталкиваться раньше, когда используете Ember 2.x и пытаются делать полноразмерные div.

В старые времена Ember, вы можете переопределить просмотреть свойства, такие как class, используя следующий синтаксис:

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

module.exports = ApplicationView; 

В Ember 2.x понятие Просмотры теперь устаревшее, но концепция компоненты требуют, чтобы вы использовали - в своем имени компонента, что, очевидно, не работает для переопределения ваших основных видов или index.

То, как я чиню это сохранить свою views/application.js структуру в моем приложении, но изменения в:

import 'Ember' from ember; 

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

Это работает, но он просто чувствует ... грязный? Кто-нибудь сталкивался или знал о более «официальном» способе делать это, потому что я не могу быть единственным человеком, который пытается сделать полный div страницы в Ember 2.x и, следовательно, нужно применить css к приложению -level 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, но я не могу придумать никакой ситуации, когда это может вызвать проблемы.