如何通过复选框在模型的 array/content 上实现多个过滤器

Question

我正在尝试在同一个模型上实施多个过滤器。我要应用过滤器的属性是数组。

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

在重新加载模型后的 ExamsExam 路径中，我提取了要应用过滤器的数据。

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

这是我的模板

<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>

现在我该如何更改模型的内容，以便在用户选择语言过滤器时，只显示属于所选语言的课程。另外，如果用户选择语言和主题过滤器，则应仅显示符合该条件的过滤器。

ember.

中关于通过复选框过滤的文档很少

有人请 suggest/guide 我如何解决这个问题并获得一个干净的解决方案。

这里是 JS BIN DEMO 以更好地说明我想要实现的目标。

Answer 1

使用 store.filter，你有一个回调函数，它 returns 一个布尔值，决定某些东西是否匹配过滤器：

filteredCourses: function() {
    return courses.filter(function(course) {
      return selectedProfessors.every(function(prof) {
        return course.get('professors').contains(prof);
      }) &&  selectedLanguages.every(function(lang) {
        return course.get('languages').contains(lang);
      }) && selectedSubjects.every(function(subj) {
        return course.get('subjects').contains(subj);
      });
    });
}.property()

这是更新后的 JSBin：http://emberjs.jsbin.com/comosepuno/1/. The checkbox component is borrowed from https://github.com/RSSchermer/ember-multiselect-checkboxes

Answer 2

基于@joostdevries 的回答...

使用 every() 回调是一个很好的解决方案，但 "feels" 有点复杂。您正在寻找的基本上是阵列之间的相交。例如，普通教授既可以是选定教授的数组，也可以是模型中的教授数组。 Ember 提供了这样的功能，称为 ... 等待它 ... intersection（请参阅 here）:)。它 returns 一个包含两个数组共有元素的数组，如果没有公共元素，则为一个空（0 长度）数组。

这里也是一样filteredCourses属性，使用intersection的方法

filteredCourses: function() {
  var selectedProfessors = this.get('selectedProfessors'),
      selectedLanguages = this.get('selectedLanguages'),
      selectedSubjects = this.get('selectedSubjects'),
      courses = this.get('model.courses');

  var intersectFn = Ember.EnumerableUtils.intersection;

  return courses.filter(function(course) {
    return intersectFn(course.get('professors') || [], selectedProfessors).length ||
           intersectFn(course.get('languages') || [], selectedLanguages).length ||
           intersectFn(course.get('subjects') || [], selectedSubjects).length;
  });
}.property('selectedProfessors.length', 'selectedLanguages.length', 'selectedSubjects.length')

首先，我们给交集函数取别名如下：

var intersectFn = Ember.EnumerableUtils.intersection;

这一步纯粹是装饰性的 - 我只是不想每次都输入 Ember.EnumerableUtils.intersection；相反，我只想输入 intersectFn。然后，我只是使用该函数来查看数组是否相交。如果他们这样做 - 结果数组的 length 将大于 0，其计算结果为真；否则 - 长度为 0，计算结果为 false。所有这一切的最后一个怪癖是，有时属性会是 undefined，这会打乱 intersection 方法。对于这种情况，我将数组设置为空。

因此，course.get('professors') || [] 意味着，如果定义了教授属性（数组）- 使用它；否则 - 使用空数组。

工作解决方案here

如何通过复选框在模型的 array/content 上实现多个过滤器

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

javascript

ember.js

ember-data