CODEWITHSUNDEEP
javascriptjquerybackbone.js
AlexNikolaev94
AlexNikolaev94

Reputation: 1209

Filtering the collection doesn't work

I have a collection of models with boolean value interviewed and I want to filter them so that my view would display either models with this property set to true or models with this property set to false. In my collection I have the following methods:

var ResumeCollection = Backbone.Collection.extend({
    filterActive: function () {
        var active = this.where({interviewed: false});
        return active;
    },

    filterInterviewed: function () {
        var interviewed = this.where({interviewed: true});
        return interviewed;
    }
});

and in my view I have the following:

var ResumeList = Backbone.View.extend({
    events: {
        'click #active': 'showActive',
        'click #interviewed': 'showInterviewed'
    },

    initialize: function () {
        this.collection = new ResumeCollection();
    },

    render: function () {
        var self = this;
        this.$el.html( $('#filter') );
        _.each(this.collection.toArray(), function (cv) {
            self.$el.append((new ResumeView({model: cv})).render().$el);
        });
    },

    showActive: function () {
        this.collection.filterActive();
        this.render();
    },

    showInterviewed: function () {
        this.collection.filterInterviewed();
        this.render();
    }
});

But any time I click #active or #interviewed buttons, it happens nothing and the models with required properties aren't rendered. I've already tried to manage that with reset method or returning a new collection instance with required models, but that's not a solution, because when I succesfully filter the initial collection, it returns me a new collection with the models I need (e.g. models where interviewed: true), and I can't filter it more -- it returns just an empty collection. I just can't get how can I filter this one collection in the way I need.

Upvotes: 0

Views: 136

Answers (3)

Ashish Sajwan
Ashish Sajwan

Reputation: 704

i would suggest you to modify you render function to accept a argument which will be array of models.

Now when rendering full collection you can call render as 

render(this.collection.models) // reference to list of models

also if you filter out the collection then the filter function most probably be returning the subset of models from collection. Which you can again pass to render function

this.render(this.showActive()) // showActive returns subset of models from collection

This way your render function becomes modular.. which accepts array and render then on page..

Now for Filtering out Collection you can use filter , where methods exposed by underscore .. Remember to capture the return and pass it along to render Function..

Upvotes: 0

Eric Guan
Eric Guan

Reputation: 15992

You're returning a successfully filtered collection, and then not doing anything with them. 

showActive: function () {
    this.collection.filterActive();//returns a value you're not using
    this.render();
},

showInterviewed: function () {
    this.collection.filterInterviewed();//returns a value you're not using
    this.render();
}

I suggest adding an optional parameter to your render method that represents the filtered collection. If the parameter is defined, use it. If not, use the unfiltered collection.

Borrowing some of @Simo's code to return a new collection.

filterActive: function () {
    var active = this.where({interviewed: false});
    return new ResumeCollection(active);
},

filterInterviewed: function () {
    var interviewed = this.where({interviewed: true});
    return new ResumeCollection(interviewed);
},

render: function (filtered) {
    var self = this;
    var data = filtered ? filtered.toArray() : this.collection.toArray();
    this.$el.html( $('#filter') );
    _.each(data , function (cv) {
        self.$el.append((new ResumeView({model: cv})).render().$el);
    });
},

showActive: function () {
    var filtered = this.collection.filterActive();
    this.render(filtered);
},

showInterviewed: function () {
    var filtered = this.collection.filterInterviewed();
    this.render(filtered);
}

Upvotes: 2

Endre Simo
Endre Simo

Reputation: 11551

Your issue is that you are not returning the filtered collection.

This should work:

filterActive: function () {
    var active = this.filter(function(item) {
        return item.get('interviewed') === false;
    });

    return new ResumeCollection(active);
},

filterInterviewed: function () {
    var interviewed = this.filter(function(item) {
        return item.get('interviewed') === true;
    });

    return new ResumeCollection(interviewed);
},

Upvotes: 0

Related Questions