Question

我正在使用MarionetteJS和Material Lite构建应用程序。

在数据表组件中对集合进行排序时遇到问题。 ListView js是一个Marionette.CompositeView实例

以下是代码：

listView.js

events: {
  'click .sort': 'onSort'
},
onSort: function(e) {
  e.preventDefault();
  var dataTable = this.$('.mdl-data-table');
  var element = this.$(e.currentTarget);
  this.collection.sortField = element.data('field');
  this.collection.sortDir = element.hasClass('mdl-data-table__header--sorted-descending') ? -1 : 1;

  //sort collection
  this.collection.sort();
}

模式

comparator: function(m1) {
  var field = this.sortField;
  var dir = this.sortDir;
  return (dir == -1) ? -m1.get(field) : m1.get(field);
}

template.html

<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable">
    <thead>
        <tr>
            <th class="mdl-data-table__cell--non-numeric">Category</th>
            <th class="mdl-data-table__cell--non-numeric mdl-data-table__header--sorted-ascending sort" data-field="entry_date">Date</th>
            <th class="mdl-data-table__cell mdl-data-table__header--sorted-ascending sort" data-field="amount">Amount</th>
            <th class="mdl-data-table__cell--non-numeric">Kind</th>
            <th class="mdl-data-table__cell"></th>
        </tr>
    </thead>
    <tbody class="records-items"></tbody>
</table>

因此，当对集合进行排序时，我必须更改元素中的类，如下所示：

//update UI
  if(this.collection.sortDir == 1) {
    element.addClass('mdl-data-table__header--sorted-descending');
    element.removeClass('mdl-data-table__header--sorted-ascending');
    this.collection.sortDir = -1;
  } else {
    if(this.collection.sortDir == -1) {
      element.addClass('mdl-data-table__header--sorted-ascending');
      element.removeClass('mdl-data-table__header--sorted-descending');
      this.collection.sortDir = 1;
    }
  }

但是当调用onRender，它在内部调用component.UpgradeDom（）时，更改不会应用于元素（th），因为数据表是从头开始呈现的。

listView.js

onRender: function() {
  componentHandler.upgradeDom();
}

我的问题是，何时更新元素css类？

提前感谢：）

Answer 1

尝试类似：

templateHelpers: function() {
  return {
    sortDir: this.collection.sortDir,
    sortAmount: this.collection.sortField === 'amount',
    sortEntryDate: this.collection.sortField === 'entry_date'
  };
}

然后使用模板中的那些根据存储的状态呈现类。

我个人也不会使用hasClass使用您存储的数据来确定要显示的类。

骨干集合排序材料数据表组件

1 个答案: