如何在 ember js 中添加 class

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 的新手。每次视图更改时，如何在 'content' class 上添加 class。

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

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

Answer 2

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

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

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

始终将以冒号 (:content) 开头的 class 名称添加到元素中
currentPath 等属性导致属性的当前值作为 class 插入，并保持动态更新

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

needs: ['application']

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

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

如果 currentRouteName 更适合您，您可以使用 currentRouteName 代替或补充 currentPath。

添加的class名称会加点，如uploads.index。您可以通过转义点在 CSS 中引用它，如

.uploads\.index { }

或者，如果您更喜欢破折号，请添加属性以提供破折号路径，例如

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

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

这已经在最近版本的 ember-cli 中进行了测试。

Answer 3

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

让我们从第二点开始：

I also don't like the idea of polluting Ember.Route

你能在不污染Ember.Route的情况下污染Ember.Route吗？（嗯？）绝对！ :) 不用覆盖 activate，我们可以编写自己的函数并告诉它给运行 .on(activate) 这样，我们的逻辑是运行，但我们并没有搞乱built-in/inherited activate勾。

The accepted answer is very procedural, imperative, jQuery-ish, and un-Ember-like.

这点我也不得不同意。在已接受的答案中，我们放弃了 Ember 的数据绑定方法，转而使用 jQuery。不仅如此，我们接下来还要有更多的代码在deactivate到"clean up the mess".

所以，这是我的方法：

Ember.Route.reopen({ setContentClass: function(){ this.controllerFor('application').set("path", this.routeName.dasherize()); }.on('activate') });

我们将自己的方法添加到 Ember.Route class 而没有 overwriting activate hook。该方法所做的就是在 application 控制器上设置 path 属性。

然后，在 application 模板中，我们可以绑定到那个属性:

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

工作解决方案here

如何在 ember js 中添加 class

How can I add a class in ember js

ember.js