Ember "Aktion übergeben ist Null oder undefiniert in (Aktion)"

Question

Ich habe eine Ember-Komponente checkout-form, die einige Logik für die Abwicklung eines Checkout-Prozesses enthält. Hier ist eine vereinfachte Version von, wie ich es bin mit:

{{#checkout-form}} 

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

{{/checkout-form}} 

Innerhalb meiner checkout-form.js Komponente habe ich folgende Aktion:

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

Und schließlich innerhalb meiner course-date.js Komponente ich habe:

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

Bei Ausführung dieses Codes erhalte ich jedoch den Fehler:

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

Was fehlt mir hier? Ich gebe die Aktion in die course-date Komponente und nicht sicher, warum fragt es nach einem Controller?

Answer 1

Grund für den Fehler ist,
Sie selectDate zugreifen, die in diesem Umfang nicht definiert ist (dh., Controller) Wenn Sie {{log 'selectDate value is ' selectDate}} innerhalb dieser Kasse-Form zu tun, die selectDate value is undefined gedruckt wird. Wenn Sie also auf Eigenschaften zugreifen möchten, die in der Komponente definiert sind, sollte diese Komponente diese Werte liefern.

Hier ist twiddle which demonstrates, wie Sie Aktion von Komponente liefern können.

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/Komponenten/Kasse-form.hbs - Hier haben wir selectDate Aktion

{{yield (action 'selectDate')}} 

Komponenten/Kasse rentieren -form.js

import Ember from 'ember'; 

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

course-date.hbs - Hier verwenden wir nur die Abschlussaktion, die an diese Komponente übergeben wird.

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