如何有条件地在 Ember 中应用 CSS 类？答案

【问题标题】：How to conditionally apply CSS classes in Ember?如何有条件地在 Ember 中应用 CSS 类？
【发布时间】：2014-12-18 12:15:52
【问题描述】：

我在 Ember 应用程序中创建了一个资源，并使用 ArrayController 来显示包含数据的表格。使用ArrayController 的sortProperties 和sortAscending 属性使表格可排序没有问题。

现在基于这两个属性的值，我需要有条件地将 CSS 样式应用于表格的列标题，但是由于 Handlebars 的逻辑有限，我需要创建一个布尔属性（sortByName、sortByValue2、@ 987654327@) 在每列的控制器上，并使用以下代码将正确的类应用于每列标题：

{{#if sortByName}}
    <th {{action "setSortBy" "name"}} {{bind-attr class="sortAscending:sorting_asc:sorting_desc"}}>Name</th>
{{else}}
    <th {{action "setSortBy" "name"}} class="sorting">Name</th>
{{/if}}

想象以上重复 10 次，你就会明白我在处理什么。这段代码非常冗长，根本不干。解决这个问题的最佳方法是什么？

理想情况下，我想使用一个表达式，它在模板内部接受一个参数并返回一个带有 CSS 类名的字符串，如下所示：

<th {{action "setSortBy" "name"}} {{bind-attr class="isSortedBy('name')"}}>Name</th>

isSortedBy('name') 将返回 sorting_asc、sorting_desc 或什么都不返回。

这可以使用标准的 Ember 功能吗？这可以使用 HTMLBars 吗？

你会如何解决类似的问题？

【问题讨论】：

标签： css ember.js handlebars.js

【解决方案1】：

这是组件的完美用例。

前提是你有：

sortedBy: Ember.Object.create({name: 'name', direction: 'asc'})

在您的控制器中。

一个实现可以是：

App.SortableThComponent = Ember.Component.extend({
  tagName: 'th',
  classNameBindings: ['sortedByMe'],
  sortedByMe: function() {
    if (this.get('sortedBy.name') === this.get('name')) {
      return this.get('sortedBy.direction');
    }
  }.property('sortedBy.name', 'sortedBy.direction'),
  click: function() {
    this.sendAction('action', this.get('name'));
  }
});

然后，在您的主模板中：

{{#sortable-th name="name" sortedBy=sortedBy action="setSortBy"}} Name {{/sortable-th}}

而且，在您的组件模板中，只需：

{{yield}}

未测试。但你可以得到这个想法。希望对您有所帮助！

【讨论】：

我将sortedBy 实现为我的控制器的一个属性，您的解决方案运行良好。谢谢。