How to pass an "action" from a template to it's grand child components in Ember Octane

Question

I am trying to pass an "action" from the controller to the grandchild component of the current template. But it fails for somereason. Could anyone let me know what am I missing here.

MainTemplate's Router Controller

export default class MainTemplateController extends Controller {

  field = "userId";

  @action
  save () {
    //save data
  }

}

MainTemplate.hbs

<ChildComponent @field={{this.field}} @save={{this.save}} /> 


ChildComponent.hbs 

<GrandChildComponent @field={{this.field}} @save={{this.save}} />


GrandChildComponent.hbs

<button @onClick={{action "doSomething" (readonly @field)}}>Save</button>

export default class GrandChildComponent extends Component {    
    @action
    doSomething(fieldName) {
        console.log(fieldName); // logs as "userId"
        console.log(this.args.save) // undefined
    }    
}

score 1 · Accepted Answer · answered Jan 14 '20 at 05:07

1

Your code looks fine. There is a small @argument issue in your ChildComponent.hbs file.

Since you are passing the argument from the MainTemplate (save and field) to GrandChildComponent via ChildComponent. The GrandChildComponent invocation should be something like,

<!-- ChildComponent.hbs  -->

<GrandChildComponent @field={{@field}} @save={{@save}} />

as these two properties are argument to the ChildComponent component and it's not owning them. Hope this solves your issue and this cheat sheet helped me to understand octane better :)

answered Jan 14 '20 at 05:07

Gokul Kathirvel

1,590
1
10
20

Thanks Gokul. That worked. There was another problem too which I needed to fix first. – Murali Nepalli Jan 15 '20 at 05:03
Glad it helped. Mind sharing the other issue? – Gokul Kathirvel Jan 15 '20 at 08:16
I have nested routers and the controller for this MainTemplate was in wrong folder. So that's why it's not able to find "refresh" method. The controller for main template has to inherit from the main router's controller. – Murali Nepalli Jan 15 '20 at 23:00

How to pass an "action" from a template to it's grand child components in Ember Octane

1 Answers1