playing with actions

components.step-1.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    YES() {
      this.sendAction('YES');
    },
    NO() {
      this.sendAction('NO');
    },    
  }
});

components.step-2.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    YES() {
      this.sendAction('YES');
    },
    NO() {
      this.sendAction('NO');
    },    
  }
});

components.steps-wizard.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    onStep1Yes() {
      this.sendAction('onFinishGood', 1);
    },
    onStep2Yes() {
      this.sendAction('onFinishGood', 1);
    },
    onStep1No() {
      this.sendAction('onFinishBad', 1);
    },
    onStep2No() {
      this.sendAction('onFinishBad', 2);
    },
  }
});

components.wizard-mediator.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    onFinishGood(index) {
			alert('FinishedGood: ' + index);
    },
    onFinishBad(index) {
			alert('FinishedBad: ' + index);
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  actions: {
    action1OnWizardMediator() {
      alert('from the app');
    }
  }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
<br>
<br>
{{wizard-mediator}}

templates.components.step-1.hbs

I'm step 1
<button {{action 'YES'}}>YES</button>
<button {{action 'NO'}}>NO</button>

{{yield}}

templates.components.step-2.hbs

I'm step 2
<button {{action 'YES'}}>YES</button>
<button {{action 'NO'}}>NO</button>

{{yield}}

templates.components.steps-wizard.hbs

I'm steps wizard <button {{action 'action1OnWizardMediator'}}>ACTION</button>

{{step-1 YES='onStep1Yes' NO='onStep1No'}}

{{step-2 YES='onStep2Yes' NO='onStep2No'}}

{{yield}}

templates.components.wizard-mediator.hbs

I'm wizard mediator <button {{action 'action1OnWizardMediator'}}>ACTION</button>

{{steps-wizard
	onFinishGood='onFinishGood'
  onFinishBad='onFinishBad'
}}

{{yield}}

twiddle.json

{
  "version": "0.15.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "2.18.2",
    "ember-template-compiler": "2.18.2",
    "ember-testing": "2.18.2"
  },
  "addons": {
    "ember-data": "3.2.0"
  }
}