Question

我是骨干新手，这是我第一次尝试对系列进行排序和过滤，非常感谢任何帮助。我有一个Backbone View，它显示了一个模型集合，这些模型在加载时使用集合比较器以反向日期顺序排序。此集合具有允许通过将比较器设置为不同的值（公司）并在集合上调用sort方法来更改排序的方法。

该集合还有一个过滤集合并返回新过滤集合的方法。我遇到的问题是我不能在新过滤的集合上使用排序方法。

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

});

我相信代码不允许对过滤后的集合进行排序，因为这些方法归因于原始集合，而过滤后的集合是＆＃34; Tickets＆＃34;的新实例化。并且不能使用这些方法，可能是因为它没有正确的事件监听器。

我已经多次尝试通过引用原始集合并为过滤的票证创建单独的集合，然后尝试在新集合上调用排序方法但没有成功来实现所需的排序。我还尝试创建另一个视图，并将过滤后的集合传递到该视图中，事件监听器在过滤集合上查找事件。

上面的代码已从我的所有尝试中删除，但我希望它能够展示我想要实现的目标，并且感谢您对此提供任何帮助。

提前致谢，Edd Neal。

Backbone.js对过滤后的集合进行排序？

0 个答案: