Массивная коллекция сортировка Материал datatable component

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() внутренне изменения не применяемые к элементу (й), так как DataTable визуализируется с нуля ..

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, используя данные, которые вы сохранили, чтобы определить, какой класс отображать.