所需的功能
我正在使用 Backbone.Collection 来查看可排序列表中的数据。我已经得到了单击某些 dom 元素会在我的 Collection 上设置属性的部分，以确定我想要排序的字段以及应该进行哪个方向的排序。
然后应该在集合上触发排序，之后视图将更新。
最终我希望能够对数字字段和字符串进行排序。某些字符串应按字母顺序排序，其他字符串应按自定义预定义顺序排序。
我目前的做法
我发现以下关于反向排序字符串的帖子：使用backbone.js 对字符串进行逆序排序 https://stackoverflow.com/questions/5636812/sorting-strings-in-reverse-order-with-backbone-js
我尝试将其与比较器函数和以下自定义属性结合起来：
- “状态”字段中可能值的自定义排序顺序
- 应该使用哪个字段进行排序
- 向哪个方向排序
到目前为止我得到的 Collection 和 Model 类：
收藏品
var ApplicationCollection = Backbone.Collection.extend({
model: ApplicationModel,
url: 'rest/applications',
// sorting
statusOrder: ['new', 'to_pay', 'payed', 'ready'],
sortField: 'submission_timestamp',
sortOrder: 'asc',
sortBy: function() {
console.log('ApplicationCollection.sortBy', this, arguments);
console.log('this.comparator', this.comparator);
var models = _.sortBy(this.models, this.comparator);
if (this.sortOrder != 'asc') {
models.reverse();
}
return models;
},
comparator: function(application) {
console.log('ApplicationCollection.comparator', this, arguments);
switch(this.sortField) {
case 'status':
return _.indexOf(this.statusOrder, application.get(this.sortField));
break;
case 'submission_timestamp':
default:
return application.get(this.sortField)
break;
}
}
});
该模型
var ApplicationModel = Backbone.Model.extend({
defaults: {
'drupal_id': 0,
'language': '',
'last_name': '',
'first_name': '',
'address': '',
'zip_code': '',
'city': '',
'country': '',
'telephone': '',
'cell_phone': '',
'email': '',
'date_of_birth': '',
'email': '',
'date_of_birth': '',
'pilot_training_institute': '',
'date_of_exam': '',
'flight_hours_total': '',
'date_of_last_flight': '',
'date_of_mcc_certificate': '',
'date_of_ir_renewel': '',
'package': '',
'submission_timestamp': '',
'status': 'new'
},
urlRoot: 'rest/applications'
});
当前（不需要的）结果
我有一个存储在“pendingApplications”中的集合实例，如下所示：
var pendingApplications = new ApplicationCollection();
pendingApplications.fetch();
这将从服务器加载应用程序，并且一切都按计划进行。我可以渲染一个包含应用程序列表的视图，所有属性都在模型上，等等。
为了对集合进行排序，我执行以下操作：
pendingApplications.sortOrder = 'asc';
pendingApplications.sortField = 'current_timestamp'; // format: YYYY-mm-dd HH:mm:ss
pendingApplications.sort();
这会触发集合上的排序功能。控制台告诉我“ApplicationCollection.sortBy”方法在“pendingApplications”实例的范围内执行，这是预期的。
但是，“ApplicationCollection.comparator”方法在全局范围内执行，我不确定为什么。此外，比较器方法的参数都不包含“pendingApplications”实例。
我希望我的比较器方法在“pendingApplications”实例的范围内执行，或者至少我希望能够以某种方式访问“pendingApplications”实例上的属性。
范围问题？错误的做法？欢迎任何建议...
有谁知道我该如何解决这个问题？或者我是否以错误的方式处理这个问题，是否有另一种解决方案可以在 Backbone.Collection 上任意定义自定义排序？
解决方案
我最终实现了排序功能作为 Backbone.Collection 的装饰器。
这样做的原因是因为我还有一个用于过滤集合中的项目的装饰器。
通过使用排序装饰器，我可以将排序应用于过滤后的项目子集，这可能会更快。
/**
* returns a new Backbone.Collection which represents a sorted version of the
* data contained within the original Backbone.Collection.
*
* @param {Backbone.Collection} original
*/
SortedCollection: function(original, criteria) {
var sorted = new original.constructor(),
// sensible defaults
defaultSortCriteria = {
custom: {},
field: 'id',
direction: 'asc'
};
// configuration
sorted.sortCriteria = _.extend(defaultSortCriteria, criteria);
// do the stuff
sorted.comparator = function(a, b) {
// @formatter:off
var criteria = this.sortCriteria,
custom,
field = criteria.field,
direction = criteria.direction,
valA,
valB;
// @formatter:on
// custom sort
if (_.has(criteria.custom, field)) {
custom = criteria.custom[field];
// custom param is a comparator itself.
if (_.isFunction(custom)) {
return custom(a, b);
}
// custom param is an example of a sorted array.
else if (_.isArray(custom)) {
valA = _.indexOf(custom, a.get(field));
valB = _.indexOf(custom, b.get(field));
}
else {
throw new Error('Invalid custom sorting criterium.');
}
}
// nothing custom here, use the field value directly.
else {
valA = a.get(field);
valB = b.get(field);
}
// compare that shizzle!
if (valA > valB) {
return (direction == 'desc') ? -1 : 1;
}
if (valA < valB) {
return (direction == 'desc') ? 1 : -1;
}
else {
if (a.get('id') > b.get('id')) {
return (direction == 'desc') ? -1 : 1;
}
else if (a.get('id') < b.get('id')) {
return (direction == 'desc') ? 1 : -1;
}
else {
return 0;
}
}
};
// update collection if original changes
original.on("add", function(model) {
sorted.add(model);
});
original.on("reset", function() {
sorted.reset(original.models);
});
original.on("remove", function(model) {
sorted.remove(model);
});
return sorted;
}
装饰器的用法：
original = new ApplicationsCollection();
sortable = SortedCollection(original);
sortable.sortCriteria = {
sortField: 'submission_timestamp',
sortDirection: 'desc'
}
sortable.sort();
上面的代码片段执行以下操作：
- 实例化一个新的ApplicationsCollection；
- 实例化一个可排序集合，该集合扩展了原始集合并侦听原始集合上的相关事件。
- 告诉可排序集合按“submission_timestamp”属性按降序排序。
- 对可排序集合进行排序。
当新模型添加到原始集合或从原始集合中删除时，或者重置原始集合时，新的可排序集合也会自动保持排序。
