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));
}

});

Я полагаю, что код не позволяет сортировать отфильтрованную коллекцию, потому что эти методы относятся к исходной коллекции, в то время как отфильтрованная коллекция является новым экземпляром "Билетов" и не может использовать эти методы, возможно, из-за того, что она не имеет правильной слушатели событий.

Я предпринял многочисленные попытки добиться желаемой сортировки, сделав ссылку на исходную коллекцию и создав отдельную коллекцию для отфильтрованных билетов, а затем попытавшись вызвать методы сортировки для новой коллекции, но безуспешно. Я также попытался создать другое представление и передать отфильтрованную коллекцию в это представление с помощью прослушивателей событий, которые ищут события в отфильтрованной коллекции.

Приведенный выше код лишен всех моих попыток, но я надеюсь, что он демонстрирует то, чего я хочу достичь, и я ценю любую помощь в этом.

Заранее спасибо, Эдд Нил.

0 ответов

Другие вопросы по тегам