sorting骨干集合初始化后
我正在使用Backbone.js呈现项目列表,例如书籍。 列表呈现后,用户可以selectsorting它们。 因此,如果用户点击sorting依据标题或按作者姓名sorting,则列表将在客户端sorting。
window.Book = Backbone.Model.extend({ defaults: { title: "This is the title", author: "Name here" },
在Backbone应用程序的上下文中完成这种types的最佳方法是什么? 我在AppView中使用jQuery dom分拣机吗?
有关这个主题的讨论,你可能想看看: https : //github.com/documentcloud/backbone/issues/41 。
简而言之,当用户select“按Xsorting”时,您可以:
- 在集合上设置
comparator
function - 调用集合的
sort
function(这将触发sort
事件) - 在视图中监听
sort
事件,并(清除并)重绘项目
处理步骤1和2的另一种方法是使用自己的方法调用Collection的sortBy
方法,然后触发View可以侦听的自定义事件。
但是,清理和重画是最简单的(甚至是最快的)sorting视图的方式,并保持它们与sorting顺序同步。
您可以更新比较器function,然后调用sorting方法。
// update comparator function collection.comparator = function(model) { return model.get('name'); } // call the sort method collection.sort();
该视图将自动重新呈现。
comparator
是你所需要的
var PhotoCollection = Backbone.Collection.extend({ model: Photo, comparator: function(item) { return item.get('pid'); } });
这种方式效果很好,并能够dynamic地sorting所有attributes
并处理ascending
或descending
:
var PhotoCollection = Backbone.Collection.extend({ model: Photo, sortByField: function(field, direction){ sorted = _.sortBy(this.models, function(model){ return model.get(field); }); if(direction === 'descending'){ sorted = sorted.reverse() } this.models = sorted; } });