Question

我想根据我在dropdown上选择的值为我的表记录添加一个过滤功能。顺便说一下，我正在使用power-select。这就是我的模板的样子

  <table>
    <tr>
      <th>
        Event Name
        {{#power-select options=uniqEventName placeholder="Selecet Event Name" onchange=(action "selectEventName") as |eventName|}}
          {{humanize-string eventName capitalize=true}}
        {{/power-select}}
      </th>
    </tr>

    <tr>
      {{#each modelNames as |modelName|}}
        <td>{{modelName.eventName}}</td>
        <td>{{modelName.updatedAt}}</td>
      {{/each}}
    </tr>
  </table>

在我route.js这就是它的样子

 model() {
  const { date } = this.paramsFor('dashboard.route-name');
  return this.queryModel(date);
 },

 setupController(controller) {
   this._super(...arguments);

   const { date } = this.paramsFor('dashboard.route-name');
   controller.set('selectedDate', date);
 },

 queryModel(date) {
   date = date || moment().format('YYYY-MM-DD');

   return this.store.query('modelName', {
    filter: {
      'created-at:between': `${date} 00:00:00,${date} 23:59:59`
    },
      sort:    'updated-at'
   });
  }

在我的controller.js上，我有以下内容

 import Ember from 'ember';

 export default Ember.Controller.extend({
   modelNames:    Ember.computed.alias('model'),
   eventNames:    Ember.computed.mapBy('modelNames', 'eventName'),
   uniqEventName: Ember.computed.uniq('eventNames'),

   actions: {
    selectDate(date) {
      this.transitionToRoute({ queryParams: { date }});
    },

    selectEventName(eventName) {
      console.log(eventName);
    }
  }
 });

我的问题是How would I filter my records based on the eventName that I selected on my dropdown?我非常感谢任何建议和方法，希望有人可以提供帮助，因为我仍然在使用余烬。谢谢

这是我的power-select

 {{#power-select options=uniqEventName placeholder="Selecet Event Name" onchange=(action "selectEventName") as |eventName|}}
   {{humanize-string eventName capitalize=true}}
 {{/power-select}}

Answer 1

首先更改onchange操作，让它设置所选事件onchange=(action (mut selectedEvent))

然后定义计算属性：

filtered: Ember.computed('modelNames', 'selectedEvent', function(item) {
  return this.get('modelNames').filterBy('eventName', this.get('selectedEvent'));
})

顺便说一句：我看到你的代码在更改所选日期时以编程方式进行转换，你可以使用refreshModel标志设置为true的查询参数。这将在日期更改时动态刷新路径。有关详细信息：https://guides.emberjs.com/v3.0.0/routing/query-params/#toc_opting-into-a-full-transition

使用基于uniq事件名称的下拉列表进行过滤

1 个答案: