jeudi 22 janvier 2015

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

I am trying to implement multiple filters on the same model. The attributes I want to apply the filter are arrays.



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

});

//Course Model
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 })
});


In the ExamsExam route after the model is resloved I extract the data I want to apply the filter on.



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


And this is my template



<script type="text/x-handlebars" data-template-name="exams/exam">
<h2>Exam page</h2>
<div class="row">
<div class="col-md-3 well">
<ul class="list-group well">
{{#each course in model.languageList}}
<li class="">
<label>
{{input type='checkbox'}}
{{course}}
</label>
</li>
{{/each}}
</ul>

<ul class="list-group well">
{{#each prof in model.professorNameList}}
<li class="">
<label>
{{input type='checkbox'}}
{{prof}}
</label>
</li>
{{/each}}
</ul>


<ul class="list-group well">
{{#each subject in model.subjectList}}
<li class="">
<label>
{{input type='checkbox'}}
{{subject}}
</label>
</li>
{{/each}}
</ul>
</div>


<div class="col-md-9">
{{#each course in model.courses}}
<div class="well">
Course name - {{course.name}}<br>
Professors - {{course.professors}}<br>
Subjects - {{course.subjects}}
</div>
{{/each}}
</div>
</div>

</script>


Now how do I change the content of the model so that if a user selects the language filter, only the courses belong to that selected language must be displayed. Plus if the user selects language and subjects filter, only the filters matching that criteria should be displayed.


There is very little documentation on filtering via checkbox in ember.


Someone please suggest/guide me on how to approach this problem and get a clean solution.


Here is the JS BIN DEMO for better illustration of what I want to achieve.





Aucun commentaire:

Enregistrer un commentaire