Question

我想将当前控制器/操作作为类添加到我的应用程序布局模板中的<body>标记。

这是我想要实现的一个例子：

# router.coffee
App.Router.map ->
  @resource 'products'

# application.hbs
<!DOCTYPE html>
<html>
<body class={{current-route-goes-here}}>
...
</body>
</html>

期望的结果是<body class="products">

如何将此逻辑添加到我的布局？

Answer 1

body标签不在ember应用程序范围内，如果你需要更改它，你需要通过javascript来完成。

应与您的热门路线混合的路线mixin（即products而非products.index）：

App.RouteClassMixin = Ember.Mixin.create({
  setupController: function(controller) {
    controller.set('routeName', this.routeName);
  },
  deactivate: function() {
    this.controllerFor(this.routeName).set('routeName', '');
  }
});

控制器混合：

App.ControllerClassMixin = Ember.Mixin.create({
  routeName: '',
  init: function() {
    this.handleBodyClass();
  },
  handleBodyClass: function() {
    var routeName = this.get('routeName');
    this.$('body').attr('class', routeName);
  }.observes('routeName')
});

这是未经测试的代码，如果您遇到任何问题，请告诉我。

Answer 2

I'm unable to comment directly on @Kitler's answer. I suggest one small change: use addClass() instead of attr(). The latter will blow away any other classes already on the body.

如何在布局中添加Ember.js路由名称？

2 个答案: