Ember「処理が成功しました（アクション）がnullまたは未定義です」エラー

Question

私はチェックアウトプロセスを処理するためのロジックを含むEmberコンポーネントcheckout-formを持っています。ここで私はそれを使用しているかの簡易版です：

私は、次のアクションを持っている私の checkout-form.js部品の内部

{{#checkout-form}} 

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

{{/checkout-form}} 

：

：私は私の course-date.js部品の内部

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

そして最後に

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

ただし、このコードを実行するとエラーが発生します。

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

私はここで何が欠けていますか？私はそのアクションをcourse-dateコンポーネントに渡していますが、なぜコントローラを要求しているのかわかりません。エラーの

Answer 1

理由は、あなたがそのチェックアウト、フォーム内{{log 'selectDate value is ' selectDate}}を行う場合はどのselectDate value is undefinedを印刷することをスコープに定義されていないselectDate（すなわち、コントローラ）にアクセスしている
です。そのため、コンポーネントに定義されているすべてのプロパティ、アクションにアクセスしたい場合、そのコンポーネントはそれらの値を返す必要があります。

twiddle which demonstratesここでは、コンポーネントからアクションを得る方法を示します。

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

テンプレート/コンポーネント/チェックアウト-form.hbs - ここでは、selectDateアクション

{{yield (action 'selectDate')}} 

コンポーネント/チェックアウトを得ています-form.js

import Ember from 'ember'; 

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

course-date.hbs - ここでは、このコンポーネントに渡されるクロージャーアクションを使用しています。

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