Ember“传递的动作为空或在（动作）中未定义”错误

Question

I have an Ember component checkout-form that contains some logic for handling a checkout process. Here's a simplified version of how I'm using it:

{{#checkout-form}}

  {{#each model.courses.otherDates as |date|}}
    {{course-date model=date selectDate=(action selectDate) }}
  {{/each}}

{{/checkout-form}}

Inside of my checkout-form.js component I have the following action:

selectDate(day) {
  this.set("startAt", day.get("serverString"))
}

And finally inside of my course-date.js component I have:

click () {
  const courseStart = this.get('courseStart')
  this.get('selectDate')(courseStart)
}

However, when running this code I get the error:

ember.debug.js:19818 Assertion Failed: Action passed is null or undefined in (action) from <site@controller:checkout/date::ember389>.

What am I missing here? I am passing the action into the course-date component and not sure why is it asking for a controller?

Answer 1

Reason for the error is,
You are accessing selectDate which is undefined in that scope(ie., controller) If you do {{log 'selectDate value is ' selectDate}} inside that checkout-form which will print selectDate value is undefined . so if you want to access any properties, actions which are defined in the component then that component should yield those values.

Here is twiddle which demonstrates how you can yield action from component.

application.hbs

{{#checkout-form as |selectDate| }}
 {{!-- 
 here context is controller not the checkout-form component
 Whatever you want to access from component, then component should yield those values.
 --}}
 {{course-date selectDate=(action 'selectDateInController')}}
 {{course-date selectDate=selectDate}}
{{/checkout-form}}

application.js

import Ember from 'ember';
export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  actions:{
    selectDateInController(){
      console.log(' selectDate in controller');
    }
  }
});

templates/components/checkout-form.hbs - Here we are yielding selectDate action

{{yield (action 'selectDate')}}

components/checkout-form.js

import Ember from 'ember';

export default Ember.Component.extend({
   actions:{
    selectDate(){
      console.log(' selectDate in checkout-form component');
    }
  }
});

course-date.hbs - Here we are just using the closure action that is passed to this component.

<button {{action selectDate}}> CourseDate </button>