Question

我对Ember相对较新，我在我的应用中收到2个错误代码。

第一个错误是：＆＃34;断言失败：名为＆＃39; filterByTeam＆＃39; （生成的schedule.index控制器）＆＃34;

中找不到

第二个错误是：＆＃34;未捕获的TypeError：无法读取属性＆＃39; getAttribute＆＃39;未定义＆＃34;

我正在尝试实现过滤器以根据用户选择显示数据。我的代码基于EmberJS教程中给出的示例。

// app/routes/schedule/index.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return this.get('store').findAll('schedules');
  }
});

// app/components/schedule-filter.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['schedule-filter'],
  value: '',

  init() {
    this._super(...arguments);
    this.get('filter')('').then((results) => this.set('results', results));
  },

  actions: {
    handleFilterEntry() {
      let filterInputValue = this.get('value');
      let filterAction = this.get('filter');
      filterAction(filterInputValue).then((filterResults) => this.set('results', filterResults));
    }
  }

});

// app/controllers/schedule.js

import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
    filterByTeam(param) {
      if (param !== '') {
        return this.get('store').query('schedule', {team: param});
      } else {
        this.get('store').findAll('schedule');
      }
    }
  }
});

// app/templates/components/schedule-filter.hbs

{{input value=value handleFilterEntry=(action 'handleFilterEntry') class="light" placeholder="Filter By Team"}}
{{yield results}}

// app/templates/schedule/index.hbs

{{#schedule-filter
   filter=(action 'filterByTeam')
   as |schedules|}}
  <ul class="results">
    {{#each schedules as |teamSchedule|}}
      <li>{{schedule-listing schedule=teamSchedule}}</li>
    {{/each}}
  </ul>
{{/schedule-filter}}
{{outlet}}

// app/mirage/config.js

this.get('/schedules', function(db, request) {
  if(request.queryParams.team !== undefined) {
    let filteredTeams = schedules.filter(function(i) {
      return i.attributes.team.toLowerCase().indexOf(request.queryParams.team.toLowerCase()) !== -1;
    });
    return { data: filteredTeams };
  } else {
    return { data: schedules };
  }
});

正在成功返回应返回的数据。鉴于我的嵌套路由，我是否还需要一个嵌套控制器？

例如：app/controllers/schedule/index.js

非常感谢！红色

Answer 1

filter=(action 'filterByTeam')

在这里，您将创建绑定到app/controllers/schedule/index.js文件的闭包操作。所以filterByTeam行动应该出现app/controllers/schedule/index.js。

filterByTeam方法未在else部分返回值。

您可以像下面那样简化代码，您可以将model属性从schedule.index控制器传递到schedule-filter组件，并引入计算属性，该属性将根据{{1}重新计算}或model属性更改。

您的组件代码，

value

import Ember from 'ember'; export default Ember.Component.extend({ classNames: ['schedule-filter'], value: '', results: Ember.comuted('model','value',function(){ let result =''; if(Ember.isPresent(this.get('value'))){ result= this.get('model').filterBy('team',this.get('value')); } else { result = this.get('model'); } return result; }) });

app/templates/components/schedule-filter.hbs

您的{{input value=value class="light" placeholder="Filter By Team"}} {{yield results}}

app/templates/schedule/index.hbs

您不需要在控制器中定义{{#schedule-filter model=model as |schedules|}} <ul class="results"> {{#each schedules as |teamSchedule|}} <li>{{schedule-listing schedule=teamSchedule}}</li> {{/each}} </ul> {{/schedule-filter}} {{outlet}}，我们只是将此代码移动到特定的组件计算属性代码。

EmberJS：未找到操作（生成的foo.index控制器）

1 个答案: