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

我正在使用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类？

在此先感谢:)

来源

2016-11-29 d00d

试着这么做：

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

，然后使用这些在你的模板来渲染根据您的存储状态的类。

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

来源

2017-01-03 06:57:21

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

回答

相关问题