如何在ember中更改不同页面的正文背景答案

【问题标题】：How to Change body background for different pages in ember如何在ember中更改不同页面的正文背景
【发布时间】：2015-07-14 08:20:10
【问题描述】：

我正在开发 ember 应用程序，我希望注册页面和登录页面的背景为白色，其余页面应为灰色背景。

目前我正在更改控制器中 body 标记的颜色（application.js 文件）

import Ember from 'ember';

export default Ember.Controller.extend({
  isVerified:false,
  bgColour: function(){
    if(['users.login','users.signup'].indexOf(this.get('currentPath')) != -1){
      return 'white';
    }
    else{
      return 'bg-grey';
    }
  }.property('currentPath'),
});

任何建议如何使这种更好/更清洁的方式？

【问题讨论】：

标签： javascript css ember.js background

【解决方案1】：

Kit 的答案很常见，我们对我们的应用程序也是如此。但是如果你真的只需要它来进行背景更改，你可以通过避免生成类名来简化它：

export default Ember.Route.extend({
  activate () {
    Ember.$('body').addClass('bg-white');
  },

  deactivate () {
    Ember.$('body').removeClass('bg-white');
  }
});

【讨论】：

【解决方案2】：

我们必须处理来自客户的大量任意请求，其中最简单的方法就是针对特定页面，因此我们将路由名称添加到 body。

Ember.Route.reopen({
  activate: function() {
    var cssClass = this.toCssClass();
    // you probably don't need the application class
    // to be added to the body
    if (cssClass != 'application') {
      Ember.$('body').addClass(cssClass);
    }
  },
  deactivate: function() {
    Ember.$('body').removeClass(this.toCssClass());
  },
  toCssClass: function() {
    return this.routeName.replace(/\./g, '-').dasherize();
  }
});

也就是说它很脏，您可以创建一个ThemeMixin 并将其设置在路线上。这是一个更简单的版本：https://github.com/ronco/ember-cli-meta-tags

【讨论】：