CODEWITHSUNDEEP
javascriptember.js
John Altar
John Altar

Reputation: 141

How can I return only filtered model in Emberjs?

I have a Ember.Select that filters the model based on certain roles. At the moment, the when the app initiates the full contents of the model are shown but I want to show the model only when the filters are applied. I am clueless on how I am gonna do that.

Here's my controller in the question,

App.TwodController = Ember.ArrayController.extend({
    //filteredContent : null,
    sortProperties: ['firstname'],
    sortAscending: true,
    selectedExperience : null,
    experience : [{
        exp : "1"
    }, {
        exp : "2"
    }, {
        exp : "3"
    }, {
        exp : "4"
    }, {
        exp : "5"
    }],
    selectedDesignation : null,
    filterDesignation : function() {
        var designation = this.get('selectedDesignation.designation');
        var filtered = this.get('content').filterProperty('designation', designation);
        this.set("filteredContent", filtered);
    }.observes('selectedDesignation'),
    designations : [{
        designation : "Design",
        id : 1
    }, {
        designation : "Writer",
        id : 2
    }, {
        designation : "Script",
        id : 3
    }, {
        designation : "Storyboard",
        id : 4
    }, {
        designation : "Workbook",
        id : 5
    }],
    actions : {
        filterExperience : function() {
            var experience = this.get('selectedExperience.exp');
            var filtered = this.get('content').filterProperty('experience', experience);
            this.set("filteredContent", filtered);
        },
        refresh : function() {
            var refresh = this.get('content');
            this.set("filteredContent", refresh);
        }
    },
    filteredContent : function() {
        var searchText = this.get('searchText'), regex = new RegExp(searchText, 'i');

        return this.get('model').filter(function(item) {
            var fullname = item.firstname + item.lastname;
            return regex.test(fullname);
        });
    }.property('searchText', 'model')

});

Moreover, one more issue I am having is I am not able to sort by ascending order. What changes I need to do in my code to achieve the desired result?

Here's the full JSBin if anyone's interested.

Upvotes: 0

Views: 72

Answers (1)

chopper
chopper

Reputation: 6709

In your App.TwodController include:

init: function() {
  this.set('filteredContent', []);
},

And in filterDesignation change this.get('content') to this.get('arrangedContent') as per the Ember.SortableMixin documentation.

filterDesignation : function() {
    var designation = this.get('selectedDesignation.designation');
    var filtered = this.get('arrangedContent').filterProperty('designation', designation);
    this.set("filteredContent", filtered);
}.observes('selectedDesignation'),

Upvotes: 1

Related Questions