Javascript EmberJS:在中找不到操作（生成的foo.index控制器）

我是相对新的余烬，我得到了2个错误代码在我的应用程序

第一个错误是： “断言失败：在（生成的schedule.index控制器）中找不到名为'filterByTeam'的操作”

第二个错误是： “未捕获的TypeError:无法读取未定义的属性'getAttribute'”

我试图实现一个过滤器，根据用户选择显示数据。我的代码基于EmberJS教程中给出的示例

//app/routes/schedule/index.js

import Ember from 'ember';

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

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

});

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

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/components/schedule filter.js

import Ember from 'ember';

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

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

});

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

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.js

import Ember from 'ember';

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

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

});

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

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/templates/components/schedule filter.hbs

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

{{#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}}

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

{{#schedule-filter
   model=model   
   as |schedules|}}
  <ul class="results">
    {{#each schedules as |teamSchedule|}}
      <li>{{schedule-listing schedule=teamSchedule}}</li>
    {{/each}}
  </ul>
{{/schedule-filter}}
{{outlet}}

//app/templates/schedule/index.hbs

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

{{#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}}

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

{{#schedule-filter
   model=model   
   as |schedules|}}
  <ul class="results">
    {{#each schedules as |teamSchedule|}}
      <li>{{schedule-listing schedule=teamSchedule}}</li>
    {{/each}}
  </ul>
{{/schedule-filter}}
{{outlet}}

应返回的数据正在成功返回。给定嵌套路由，我是否也需要嵌套控制器

例如：

app/controllers/schedule/index.js

import Ember from 'ember';

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

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

});

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

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

非常感谢！ 红色的

filter=（操作'filterByTeam'）

在这里，您正在创建绑定到

app/controllers/schedule/index.js

文件的闭包操作。因此，

filterByTeam

操作应该出现在

app/controllers/schedule/index.js

中

filterByTeam

方法未在

else

部分中返回值

您可以像下面这样简化代码，您可以将

模型

属性从

调度。索引

控制器传递到

调度过滤器

组件，并引入计算属性，该属性将根据

模型

或

值

属性更改重新计算

您的组件代码

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 handleFilterEntry=(action 'handleFilterEntry') class="light" placeholder="Filter By Team"}}
{{yield results}}

{{#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}}

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

{{#schedule-filter
   model=model   
   as |schedules|}}
  <ul class="results">
    {{#each schedules as |teamSchedule|}}
      <li>{{schedule-listing schedule=teamSchedule}}</li>
    {{/each}}
  </ul>
{{/schedule-filter}}
{{outlet}}

你的

app/templates/schedule/index.hbs

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

{{#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}}

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

{{#schedule-filter
   model=model   
   as |schedules|}}
  <ul class="results">
    {{#each schedules as |teamSchedule|}}
      <li>{{schedule-listing schedule=teamSchedule}}</li>
    {{/each}}
  </ul>
{{/schedule-filter}}
{{outlet}}

{{#计划过滤器
模型
作为|附表|}

{{{#每个日程安排为|团队日程安排}
{{schedule listing schedule=teamSchedule}}
{{/每个}}

{{/schedule filter}
{{outlet}}

---

您不需要在控制器中定义

filterByTeam

，我们只是将此代码移动到特定的组件计算属性代码。

谢谢@kumkanillam，添加额外的控制器解决了第一个问题。我现在得到错误

无法读取未定义的'then'属性。这是由于
filterByTeam
方法没有像您所说的那样返回任何内容造成的。我希望能够单击按钮并相应地应用
filterByTeam
方法。是否需要哈佛商学院的助手来实现这一点？我用一个建议的解决方案更新了我的答案。您只需要计算属性。这将满足您的需求，您不需要定义操作
handleFilterEntry
和
filterByTeam