灰燼「動作傳遞爲空或在（動作）未定義」錯誤

Question

我有一個包含用於處理結帳過程的一些邏輯灰燼成分checkout-form。下面是我如何使用它的簡化版本：

{{#checkout-form}} 

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

{{/checkout-form}} 

裏面我checkout-form.js分量的，我有以下作用：

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

我 course-date.js構件的內部

最後我：

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

原因的錯誤是，
您正在訪問selectDate這是在該範圍未定義（即，控制器）如果你這樣做是{{log 'selectDate value is ' selectDate}}結帳表單中，它將打印selectDate value is undefined。所以如果你想訪問任何屬性，在組件中定義的動作，那麼該組件應該產生這些值。

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

當然，date.hbs - 在這裏，我們只是使用傳遞給此組件的閉合動作。

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