Nested component and sendAction

Hi all,

I have a component which call himself… this is the template calling the component:


{{messaggi-discussione messaggi=this.messaggi inviarisposta="inviaMessaggio"}}

and this is the component template calling himself using other parameters:


{{messaggi-discussione messaggi=messaggio.risposte inviarisposta="inviaMessaggio"}}

this is the action section in the component discussione_controller.js

actions: {

    inviaRisposta    : function (msgcall) {
        console.log('COMPONENT inviaRisposta');
        this.sendAction('inviarisposta', risposta);


and this is the action section in the controller

actions: {
    inviaMessaggio: function (datimessaggio) {
        console.log('CONTROLLER inviaMessaggio');

the problem is that the controller action inviaMessaggio is called only from the first level component… nested components doesn’t bubble to the controller… why? Surely im making something wrong… :smile:

I am having trouble replicating your issue. Ember Latest - JSFiddle - Code Playground Modify this jsfiddle to illustrate your problem.

Just modified to reply my situation… in the jsfiddle it works… i have to check something in my code… :smile:

After some days I check my code… and now it works… The problem was the #each iteration inside the component I was doing it:

Call the component from my template

{{messaggi-discussione messaggi=this.risposte}} 

The component iterate itself inside of him

{{#each messaggio in messaggi}}
  {{messaggi-discussione messaggi=messaggi.risposte}}

Now I modify the code like this:

Iterate the component from the template:

{{#each risposta in this.risposte}}
  {{messaggio-discussione messaggio=risposta}}

And the component iterate itself inside of him

{{#each risposta in messaggio.risposte}}
  {{messaggio-discussione messaggio=risposta}}

And it works… note that messaggio is the singular for messaggi, risposta is the singular for risposte :smile: Now the actions bubble to the controller.

Thanks for the support :wink:

1 Like