Ember js过滤模型通过复选框有很多内容

Question

我正在构建一个小型教育应用程序，其结构如下 -

考试hasMany科目和科目hasMany门课程。

我的模特关系 -

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

});

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

最初我显示所有考试，然后 exam/1 我显示属于该考试的所有科目。

我在通过复选框过滤主题时遇到问题

这是Demo

不知道该怎么做。有人可以建议我如何解决这个问题吗？

基本上在单击 physics checkbox 时，视图中只应显示物理主题。

Answer 1

这在 ember.js 中根本不可能是的，太棒了

Answer 2

我基本上使用评论中提到的来自我的博客 post 的 MultipleSelectionFilterComponent。该组件将负责管理不同复选框的选择，并将过滤功能发送到控制器。在那里您可以使用该函数来过滤数据。详情可以参考我的post

Here is the working demo.

代码看起来像

App.ExamsExamRoute = Ember.Route.extend({
  model: function(params) {
    return this.store.find('exam', params.exam_id).then(function (exam) {
      console.log("found", exam);
      return exam;
    });
  },
  setupController: function(controller, model) {
    this._super(controller, model);
    controller.set('filteredContent', model.get('data.subjects'));
  }
});

App.ExamsExamController = Em.ObjectController.extend({
  filteredContent: [],
  actions: {
    filterBySubject: function(filterFn) {
      this.set('filteredContent', 
          this.get('model.data.subjects').filter(filterFn));
    }
  }

});

<ul class="list-group">
  {{#multiple-selection-filter filter-key-path="name" 
      action="filterBySubject"}}
    {{#each subject in model.subjects}}
      <li class="">
        <label>
          <input type="checkbox" class="item-checkbox" {{bind-attr 
              value=subject.name}}/>
          {{subject.name}}
        </label>
      </li>
    {{/each}}
  {{/multiple-selection-filter}}
</ul> 

<h3>Subjects Details - </h3>
{{#each subject in filteredContent}}
  <div class="col-md-3 well">
    {{subject.name}}
    <br>{{subject.description}}
  </div>
{{/each}}

这是 MultipleSelectionFilterComponent 的代码。

App.MultipleSelectionFilterComponent = Em.Component.extend({

  selectedItems: [],

  click: function(event) {
    var el = Em.$(event.target);
    var filterFn;

    if(el.is('input[type=checkbox]')) {
      if(el.is(':checked')) {
        this.get('selectedItems').pushObject(el.val());
      } else {
        this.get('selectedItems').removeObject(el.val());
      }
    }

    if(this.get('selectedItems.length')) {
      filterFn = function(item) {
        return this.get('selectedItems')
            .contains(Em.get(item, this.get('filter-key-path')));
      }.bind(this);
    } else {
      filterFn = function() {return true;};
    }

    this.sendAction('action', filterFn);
  }
});

Ember js过滤模型通过复选框有很多内容

Ember js filter model hasMany content via checkbox

ember.js

ember-data