How to implement multiple filters on model's array/content via checkbox

Ember Data
1

This is my first post here on ember js and I am really pointless on how to implement multiple checkbox filters on the same model.

Please can someone guide/suggest me on how to solve this?

I am sure many ember js beginners out there must have faced the same problem.

Please check the question on StackOverflow

2

I believe that the filtering should not be done from the route but in a controller instead. Unless the model is invalidated later on, there’s just one call to the model hook at the beginning so none of the filtering there will work.

You want to iterate over the filteredContent: function(){}.property() of the controller which observes the individual filters for change and updates if triggered:

{{#each item in filteredContent}}
    ...
{{/each}}

Hope this helps.

3

Got that. But how do I send the selected filters to the controller ?

4

You don’t need to send anything directly to the controller.

Just bind the different checkbox settings to a controller property.

Since it is being observed through property('name_of_setting') it will be triggered automatically to recalculate the filteredContent accordingly to be re-rendered in the template.

Hopefully this makes sense.

5

You are saying loop through filtered content and make it a property so that it is called whenever there is a change in the mentioned property. Got that

But in my example JS BIN

I have exam and course model

App.Exam = DS.Model.extend({
    name: DS.attr('string'),
    description: DS.attr('string'),
    courses : DS.hasMany('course',{ async: true }),
    
});

App.Course = DS.Model.extend({
 name: DS.attr('string'),
  description:DS.attr('string'),
  professors: DS.attr(),
  subjects: DS.attr(),
  languages: DS.attr(),
  exam: DS.belongsTo('exam', { async: true })
});

And after I fetch a single exam record I extract the filters information for the exam record by looping through all the courses the exam has and set the languages, professors and subjects array.

App.ExamsExamRoute = Ember.Route.extend({
  model: function(params) {

    return this.store.find('exam', params.exam_id).then(function (exam) {
        console.log("found single exam", exam);
            return exam;
        });
  },

  afterModel: function(model, transition){
    var self = this;
    var professorList = [];
    var subjectList = [];
    var languageList = [];

    var promise = new Ember.RSVP.Promise(function(resolve, reject){
        var courses = model.get('courses');

        courses.forEach(function(course){
          self.store.find('course', course.get('id')).then(function(course){
            var profs = course.get('professors');
            var subjects = course.get('subjects');
            var languages = course.get('languages');

            profs.forEach(function(prof) {
              if (professorList.indexOf(prof) === -1) {
                professorList.pushObject(prof);
              }
            });

            subjects.forEach(function(subject) {
              if (subjectList.indexOf(subject)  === -1) {
                subjectList.pushObject(subject);
              }
            });

            languages.forEach(function(language) {
              if (languageList.indexOf(language)  === -1) {
                languageList.pushObject(language);
              }
            });
          });
        });
        var data = {
          professorList: professorList,
          subjectList: subjectList,
          languageList: languageList
        };
        resolve(data);
    });

    promise.then(function(data) {
      console.log(data);
      model.set('professorNameList', data.professorList);
      model.set('subjectList', data.subjectList);
      model.set('languageList', data.languageList);
    });
  }
});

Now how do I make the filters work. ?

Basically I have 3 filters that need to work with one model. And the data for the filters is coming from the model itself. Please have a look at the demo mentioned in the jsbin.

6

Did you make progress on that? Came across a similar problem…