Question

    <script type="text/x-handlebars">
        <div class="wrapper">

        <div class="sideMenu">

        {{#link-to 'home'}}Home{{/link-to}}
        {{#link-to 'posts'}}Posts{{/link-to}}
        </div>


        <div class="content">

        {{outlet}}
         </div>

        </div>

    </script>

我是ember js的新手。如何在内容上添加课程＆＃39;每当视图发生变化时都会上课。

Answer 1

我们这样做：

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();
  }
});

它会向正文添加一个类（在您的情况下只使用内容），这与当前路径相同。

Answer 2

只需将应用程序控制器上的currentPath属性绑定到模板中元素的类：

<div {{bind-attr class=":content currentPath"}}>
    {{outlet}}
</div>

如果您不熟悉Ember / Handlebars中的{{bind-attr class=语法：

以冒号（:content）开头的类名始终添加到元素
currentPath等属性导致该属性的当前值作为类插入，并保持动态更新

为了能够访问由应用程序控制器以外的控制器驱动的模板中的currentPath，请先添加

needs: ['application']

到控制器，使应用程序控制器名为controllers.application，以便在bind-attr中使用，如下所示：

<div {{bind-attr class=":content controllers.application.currentPath"}}>

如果效果更好，您可以使用currentRouteName代替currentPath或uploads.index。

添加的类名称将加点，例如.uploads\.index { }。您可以通过转义点来引用CSS中的内容，如

dasherizedCurrentPath: function() {
    return this.('currentPath').replace(/\./g, '-');
}.property('currentPath')

<div {{bind-attr class=":content dasherizedCurrentPath"}}>

或者，如果您希望使用dasherized，请添加属性以提供虚线化路径，例如

{{1}}

这已在最新版本的ember-cli中测试过。

Answer 3

@torazaburo对@Asgaroth（已接受）答案有一些很好的观点，但我喜欢不必一遍又一遍地写这个功能的想法。所以，我在下面提供的是两种解决方案的混合加上我自己的两分钱，我相信它解决了@torazaburo关于接受的答案的担忧。

让我们从第二点开始：

我也不喜欢污染Ember.Route
的想法

如果没有污染Ember.Route，您是否会污染Ember.Route ？（嗯？）绝对！ :)而不是覆盖activate，我们可以编写自己的函数并告诉它运行.on(activate)这样，我们的逻辑就会运行，但我们并没有搞乱内置/继承{{1 }钩子。

接受的答案非常具有程序性，命令性，jQuery-ish和非Ember-like。

我也同意这一点。在接受的答案中，我们放弃了Ember的数据绑定方法，而是依赖于jQuery。不仅如此，我们还必须在activate中添加更多代码，以及＃34;清理混乱＆＃34;。

所以，这是我的方法：

deactivate

我们将自己的方法添加到Ember.Route.reopen({ setContentClass: function(){ this.controllerFor('application').set("path", this.routeName.dasherize()); }.on('activate') });类，而不用覆盖 Ember.Route挂钩。所有方法都是在activate控制器上设置path属性。

然后，在application模板中，我们可以绑定到该属性：

application

工作解决方案here

如何在ember js中添加一个类

3 个答案: