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

我基本上是使用评论中提到的博文中的MultipleSelectionFilterComponent。该组件将负责管理不同复选框的选择，并向控制器发送过滤功能。在那里，您可以使用该功能过滤数据。您可以参考我的帖子了解更多详情。

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

Answer 2

这在ember.js中是不可能的是的，它是sux

Ember js过滤器模型通过复选框提供了许多内容

2 个答案: