Ember js过滤模型通过复选框具有许多内容答案

【问题标题】：Ember js filter model hasMany content via checkboxEmber js过滤模型通过复选框具有许多内容
【发布时间】：2015-01-20 19:49:43
【问题描述】：

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

考试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，视图中只会显示物理主题。

【问题讨论】：

这可能有点用 blessanmathew.com/2014/08/16/…
@blessenm - 我们可以通过我的代码实现相同的目标吗？请看演示

标签： ember.js ember-data

【解决方案1】：

我基本上使用 cmets 中提到的我的博客文章中的 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);
  }
});

【讨论】：

这非常感谢。我会尝试以类似的方式实现其他过滤器。
如果我通过控制台登录组件，即使只有一次单击事件，组件的单击事件也会被调用两次。知道为什么会这样吗？
stackoverflow.com/questions/19595084/…
哦，我不知道。学到了一些新东西。谢谢
我怎样才能对数组而不是字符串进行过滤键路径查找？

【解决方案2】：

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

【讨论】：