2012-07-16 112 views
11

我有一个表格中呈现的骨干集合。我想根据集合具有的某些属性将表格排序,如“task_status”,“task_group”。我正在阅读有关collection.comparator,nd collection.sort的主干文档。 我该怎么做到这一点?基于模型属性的排序骨干集合

回答

29

comparator函数用于比较集合中的两个模型,它可以以任何(一致)的方式比较它们。特别是,它可以选择模型属性使用,因此你可以有你的收藏中是这样的:

initialize: function() { 
    this.sort_key = 'id'; 
}, 
comparator: function(a, b) { 
    // Assuming that the sort_key values can be compared with '>' and '<', 
    // modifying this to account for extra processing on the sort_key model 
    // attributes is fairly straight forward. 
    a = a.get(this.sort_key); 
    b = b.get(this.sort_key); 
    return a > b ? 1 
     : a < b ? -1 
     :   0; 
}  

,然后你只需要在收集一些方法来改变sort_key,并呼吁sort

sort_by_thing: function() { 
    this.sort_key = 'thing'; 
    this.sort(); 
} 

在较老的骨干网中,呼叫sort将触发"reset"事件,而较新的版本将触发"sort"事件。为了弥补这两种情况下,你可以听的事件和重新渲染:

// in the view... 
initialize: function() { 
    this.collection.on('reset sort', this.render, this); 
} 

演示:http://jsfiddle.net/ambiguous/7y9CC/

您还可以使用listenTo代替on来帮助你避免僵尸:

initialize: function() { 
    this.listenTo(this.collection, 'reset sort', this.render); 
} 

演示:http://jsfiddle.net/ambiguous/nG6EJ/

+0

我可以在一个情况下的排序字段是字符串 – MrFoh 2012-07-16 19:28:36

+0

@MrFoh使用这种模式在字符串中,演示中的's'属性是一个字符串。 – 2012-07-16 20:16:34

+1

请注意,此示例不再有效,因为Backbone不再在排序时触发重置事件。它触发排序事件。 – 2013-06-19 23:15:58

20

@ mu-is-too-short的答案是好的,除非有一种更简单的方法来比较字段值:

根据字段对集合进行排序的最简单方法是提供一个比较器函数,该函数返回要排序的确切字段值。这种比较器使Backbone调用sortBy函数,而不是sort,然后它自己进行复杂的比较,你不必担心逻辑。

因此,本质上,您不必提供复杂的比较函数,除非您有更高级的需求来确定顺序。

var myCollection = Backbone.Collection.extend({ 
    sort_key: 'id', // default sort key 
    comparator: function(item) { 
     return item.get(this.sort_key); 
    }, 
    sortByField: function(fieldName) { 
     this.sort_key = fieldName; 
     this.sort(); 
    } 
}); 

在这之后你可以调用集合的sortByField - 函数与表示要排序的键的字符串。 例如:

collection.sortByField('name'); 

修改@我,是太短的演示:http://jsfiddle.net/NTez2/39/

+1

请注意,此示例不再有效,因为Backbone不再在排序时触发重置事件。它触发排序事件。 – 2013-06-19 23:21:34

+1

感谢您的领导!我更新了该示例以适应该更改:http://jsfiddle.net/NTez2/39/ – jylauril 2013-06-25 11:31:37

+1

单参数比较器(和'_.sortBy')的大问题是无法在升序和降序之间切换以任何理智的方式处理字符串。数字降序很容易,因为您可以取消数字,但否定字符串并不容易。如果不将它们混合到一个单独的字符串中,您也无法按几个键进行排序,并且需要注意将其正确设置。 – 2013-08-15 16:15:07

3

@ jylauril的回答有极大的帮助,但是需要修改演示(在骨干网或许细微变化,因为它被张贴?)

看起来您需要在排序后触发渲染。

$('#by-s').click(function() { 
    c.sortByField('s'); 
    v.render(); 
}); 

更新@我,是太短的演示:是的,'>`和`<`工作:http://jsfiddle.net/NTez2/13/