重写Ember 2.x核心组件中的“视图”级别属性

我遇到过一个问题，我确信开发人员在使用Ember 2.x和尝试完成整页div时必须遇到过这个问题。重写Ember 2.x核心组件中的“视图”级别属性

在灰烬的过去，你可以通过使用下面的语法覆盖视图属性如class：

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

module.exports = ApplicationView;

在余烬2.x中，浏览的概念现在已经过时，但理念组件要求您在组件名称中使用-，这显然无法覆盖您的application或index核心视图。

，我很固定，这是我的护结构views/application.js在我的应用程序，但改变的方式：

import 'Ember' from ember; 

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

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

来源

2016-02-20 Stephen Wright

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

来源

2016-02-20 19:15:40

重写Ember 2.x核心组件中的“视图”级别属性

回答

相关问题