Question

我在我的Ember应用程序中创建了一个资源，并且我使用ArrayController来显示包含数据的表。我使用ArrayController的{{1}}和sortProperties属性对表格进行排序没有任何问题。

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

sortByValue2

想象一下上面重复了10次，你就会知道我正在处理什么。这段代码非常详细，根本不是DRY。解决这个问题的最佳方法是什么？

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

sortByValue2

{{#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}}将返回<th {{action "setSortBy" "name"}} {{bind-attr class="isSortedBy('name')"}}>Name</th>，isSortedBy('name')或任何内容。

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

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

Answer 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}}

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

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

1 个答案: