CODEWITHSUNDEEP
javascriptember.jsember-data
Red Hendery
Red Hendery

Reputation: 74

EmberJS: Action not found in (generated foo.index controller)

I am relatively new to Ember and I am getting 2 error codes in my app.

The first error is: "Assertion Failed: An action named 'filterByTeam' was not found in (generated schedule.index controller)"

The second error is: "Uncaught TypeError: Cannot read property 'getAttribute' of undefined"

I am trying to implement a filter to display data based on a user selection. I have based my code off of the example given in the EmberJS Tutorial.

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

The data that should be returned is being successfully returned. Given my nested routes, do I need to have a nested controller as well?

E.g: app/controllers/schedule/index.js

Many thanks! Red

Upvotes: 2

Views: 1061

Answers (1)

Ember Freak
Ember Freak

Reputation: 12872

  1. filter=(action 'filterByTeam')

Here you are creating closure action which bounds to app/controllers/schedule/index.js file. so filterByTeam action should present in app/controllers/schedule/index.js.

  1. filterByTeam method is not returning value in else part.

You can simplify your code like the below, You can pass model property from schedule.index controller to schedule-filter component, and introduce computed property which will recalculate based on the model or value property change.

Your component code,

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

Your 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}}

You don't need to define filterByTeam in controller, we just moved this code to particular component computed property code.

Upvotes: 1

Related Questions