Question

我有一个表格，我已经应用了排序但是为了完成这个任务，我希望这些类能够根据排序来改变以显示插入符号的上升或下降。

正如您所看到的，我在Ember中使用了标准的SortableMixin来获取排序功能，但是我无法更改已单击的单个元素的类。

App.CampaignsController = Ember.ArrayController.extend({
    sortProperties: ["id"],
    sortAscending: true,

    actions: {
        sortBy: function(property){
            if (this.get("sortProperties")[0] === property){
                this.toggleProperty("sortAscending");
            } else {
                this.set("sortProperties", [property]);
                this.set("sortAscending", true)
            }
        }
    }
});

我已经应用了以下操作的表格：

        <table class="table table-striped table-hover">
          <thead>
            <tr>
              <th {{action "sortBy" "name"}}><i {{bind-attr class=":fa sortAscending:fa-caret-up:fa-caret-down"}}></i>Campaign Name</th>
              <th {{action "sortBy" "campaign_code"}}><i {{bind-attr class=":fa sortAscending:fa-caret-up:fa-caret-down"}}></i>Campaign Code</th>
            </tr>
         </thead>
         <tbody>
              <td>{{name}}</td>
              <td>{{campaign_code}}</td>
        </tbody>
      </table>

我正在使用sortAscending布尔值来指示将出现的CSS类。我的问题是如果我点击第一个标题，第二个标题上的类也会改变。

如何让CSS仅在我点击的标题上进行更改？

Answer 1

您的<th>现在已经处于状态（是否已排序，以及它是上升还是下降），因此您应该将其包装在组件中。像这样的东西

<table>
  <thead>
    <tr>
      {{#sortable-th property='name' action='sortBy'}}
        Campaign Name
      {{/#sortable-th}}
    </tr>
  </thead>
</table>

组件的模板

// templates/components/sortable-th.js
<th>
  <i {{bind-attr class=":fa sortAscending:fa-caret-up:fa-caret-down"}}></i>
  {{yield}}
</th>

和代码

// components/sortable-th.js
export default Ember.Component.extend({
  sortAscending: true,

  click: function() {
    this.toggleProperty('sortAscending');
    this.sendAction('action', this.get('property'), this.get('sortAscending'));
  }
}

这只是一个粗略的轮廓，请亲自尝试实施。但那就是我如何开始思考它。

在Ember和SortMixin中更改CSS类

1 个答案: