Question

好的，所以我对编程很新，我知道如何在JSON阵列上运行过滤器但是当我从firebase中提取数据并在其中查看数据时，我似乎无法弄明白。 Ember app。

这是我的route.js代码：

    import Ember from 'ember';

    export default Ember.Route.extend({
      model: function() {
        return this.store.findAll('user');
      }
    });

这是我的template.hbs代码href =＆＃34;＃！＆＃34;是下拉按钮的实体化的通用：

    <div class="list-wrapper col-xs-10 col-xs-offset-1">
        <div class="col-xs-12 button-div">
           {{#md-btn-dropdown text='Filter' class="col-xs-2"            belowOrigin=true}}
               <li><a href="#!">Female</a></li>
               <li><a href="#!">Male</a></li>
               <li><a href="#!">All</a></li>
           {{/md-btn-dropdown}}
        </div>
        {{#each model as |info|}}
        <div class="col-xs-3 user-card">
           <div class="card-info">
               <ul>
                   <li>Last Name- {{info.lastName}}</li>
                   <li>First Name- {{info.firstName}}</li>
                   <li>Gender- {{info.gender}}</li>
                   <li><a href="mailto:{{info.email}}">{{info.email}} </a></li>
               </ul>
           </div>
       </div>
       {{/each}}
    </div>
    {{outlet}}

这是我的controller.js代码，我不错：

    import Ember from 'ember';

    export default Ember.Controller.extend({
      customFilter: function(gender) {
         return function(el) {
            var r = el.user;
            return r.gender === gender;
         };
      }
    });

这是我的模特：

    import DS from 'ember-data';
    import Ember from 'ember';

    export default DS.Model.extend({
      lastName: DS.attr('string'),
      firstName: DS.attr('string'),
      gender: DS.attr('string'),
      email: DS.attr('string')
    });

我搜索过高低，我确定我只是遗漏了一些基本和愚蠢的东西。我想要的是下拉菜单能够过滤和显示女性，男性或所有。我再次对这些东西感到陌生，所以如果这是一个非常基本的东西，我道歉。谢谢

Answer 1

您遗漏的是在实际选择下拉列表中的项目时更新控制器的操作。

一些有用的阅读：

以下是如何在您的下拉组件中添加操作

  {{#md-btn-dropdown text='Filter' class="col-xs-2" belowOrigin=true}}
               <li><a {{action "filterUpdated" "female"}}>Female</a></li>
               <li><a {{action "filterUpdated" "male"}}>Male</a></li>
               <li><a {{action "filterUpdated"}}>All</a></li>
   {{/md-btn-dropdown}}

在你的控制器中，你需要像这样处理这个动作：

import Ember from 'ember';

export default Ember.Controller.extend({

  // the people property is an alias of the model object
  // which essentially makes people a synonym for model
  // read more http://emberjs.com/api/classes/Ember.computed.html#method_alias
  people: Ember.computed.alias('model'),

  // holds the currently selected gender, e.g., "female". A null value indicates there is no filter.
  currentFilter: null,

  /*
   filteredPeople is a computed array containing people models.
   The array is recomputed every time the model changes or the currentFilter changes,
   see the .property() bit at the end.
   read more: http://emberjs.com/api/classes/Ember.computed.html#method_filter
   */
  filteredPeople: Ember.computed.filter('people', function(person/*, index, array*/) {
    // this function is passed each item in the model array, i.e., the person argument
    // there's no need to use the index nor array arguments, so I've commented them out
    if(this.get('currentFilter') === null) {
      // when the filter is null, we don't filter any items from the array
      return true;
    } else {
      // otherwise only return true if the gender matches the current filter
      return person.gender === this.get('currentFilter');
    }
  }).property('people', 'currentFilter'),

  actions: {
    filterUpdated: function (value) {
      if (Ember.isEmpty(value)) {
        // an empty value means we should clear the filter
        this.set('currentFilter', null);
      }
      else {
        this.set('currentFilter', value);
      }
    }
  }
});

最后，编辑模板以进行更改

 {{#each model as |info|}}

到

{{#each filteredPeople as |info|}}

同样在元级别，不要为提问而道歉！每个人在某些方面都是新事物，而且经常要求学习是最好的方式。这就是stackoverflow的全部内容：）

Answer 2

这样的事情会起作用：

gender: 'All',
filteredModel: Ember.computed.filter('model', function(person) {
  return person.gender === this.get('gender');
}).property('gender'),

这假定它始于全部，然后当下拉列表更改性别的值时，则filteredModel将更新。然后，您可以在hbs文件中将结果更改为：

{{#each filteredModel as |info|}}

在ember中过滤数组

2 个答案: