Backbone.js Сортировка отфильтрованной коллекции?
Я новичок в опоре, и это моя первая попытка сортировки и фильтрации коллекции, и я был бы очень признателен за любую помощь. У меня есть Backbone View, который отображает коллекцию моделей, которые при загрузке сортируются в обратном порядке дат с использованием компаратора коллекций. В этой коллекции есть методы, которые позволяют изменять сортировку, устанавливая для компаратора другое значение (компанию) и вызывая метод сортировки в коллекции.
Коллекция также имеет метод, который фильтрует коллекцию и возвращает новую отфильтрованную коллекцию. Проблема в том, что я не могу использовать методы сортировки в новой отфильтрованной коллекции.
Коллекция
var Tickets = Backbone.Collection.extend({
model: TicketModel,
url: '/tickets',
comparator: function(a,b) {
if(a.get('date') < b.get('date')) {
return 1;
} else if(b.get('date') > a.get('date')){
return -1;
}
return 0;
},
byFilter: function(key, value){
filtered = this.filter(function(data){
return data.get(key) === value;
});
return new Tickets(filtered);
},
byDate: function() {
this.comparator = function(a, b) {
if(a.get('date') < b.get('date')) {
return 1;
} else if(b.get('date') > a.get('date')){
return -1;
}
return 0;
};
this.sort();
},
byCompany: function(){
this.comparator = function(model) {
return model.get('company');
}
this.sort();
}
});
Вид
var TicketView = Backbone.View.extend({
template: Handlebars.compile(
'<div class="sort">' +
'<a class="sortByDate">Sort By Date</a>' +
'<a class="sortByCompany">Sort By Company</a>' +
'</div>' +
'<div class="filter">' +
'<a class="allTickets">All Tickets</a>' +
'<a class="myTickets mid-link">My Tickets</a>' +
'<a class="completedTickets">Completed Tickets</a>' +
'</div>' +
'<ul>'+
'{{#each models}}<li class="ticket">' +
'<div class="date">{{attributes.date}}</div>' +
'<div class="name">{{attributes.name}}</div>' +
'<div class="company-name">{{attributes.company}}</div>' +
'</li>{{/each}}'+
'</ul>'
),
initialize: function() {
this.listenTo(this.collection, "reset", this.render);
this.listenTo(this.collection, "add", this.render);
this.listenTo(this.collection, "remove", this.render);
this.listenTo(this.collection, "change", this.render);
this.listenTo(this.collection, "sort", this.render);
},
render: function() {
this.$el.html(this.template(this.collection));
this.delegateEvents({
'click .sortByDate': 'sortByDate',
'click .sortByCompany': 'sortByCompany',
'click .myTickets': 'myTickets',
'click .completedTickets': 'completedTickets',
'click .allTickets': 'allTickets'
});
return this;
},
sortByDate: function(){
this.collection.byDate();
},
sortByCompany: function(){
this.collection.byCompany();
},
myTickets: function() {
this.$el.html(this.template(this.collection.byFilter("user", "Edd N.")));
},
completedTickets: function() {
this.$el.html(this.template(this.collection.byFilter("status", "Completed")));
},
allTickets: function(){
this.$el.html(this.template(this.collection));
}
});
Я полагаю, что код не позволяет сортировать отфильтрованную коллекцию, потому что эти методы относятся к исходной коллекции, в то время как отфильтрованная коллекция является новым экземпляром "Билетов" и не может использовать эти методы, возможно, из-за того, что она не имеет правильной слушатели событий.
Я предпринял многочисленные попытки добиться желаемой сортировки, сделав ссылку на исходную коллекцию и создав отдельную коллекцию для отфильтрованных билетов, а затем попытавшись вызвать методы сортировки для новой коллекции, но безуспешно. Я также попытался создать другое представление и передать отфильтрованную коллекцию в это представление с помощью прослушивателей событий, которые ищут события в отфильтрованной коллекции.
Приведенный выше код лишен всех моих попыток, но я надеюсь, что он демонстрирует то, чего я хочу достичь, и я ценю любую помощь в этом.
Заранее спасибо, Эдд Нил.