css - 如何在 Ember 中有条件地应用 CSS 类？

Question

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

现在根据这两个属性的值，我需要有条件地将 CSS 样式应用于表格的列标题，但是由于 Handlebars 有限的逻辑，我需要创建一个 bool 属性 (sortByName, sortByValue2, sortByValue2) 在 Controller 上为每一列并使用以下代码将正确的类应用于每一列标题:

{{#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 实现吗？

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

Answer 1

这是组件的完美用例。

前提是你有:

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

在你的 Controller 中。

一个实现可以是:

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"}} 姓名 {{/sortable-th}}

并且，在您的组件模板中，只需:

{{yield}}

未经测试。但你可以明白这一点。希望对您有所帮助!