New Twiddle

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  data: [
    {
      id: 1,
      name: 'item 1',
    },
    {
      id: 2,
      name: 'item 2',
    },
  ],
  toolbarConfig: Ember.computed(function() {
    let data = this.get('data');
    return {
      title: 'Ember Twiddle',
      buttonsA: [
        {
          action() {
            console.log('enable');
          },
          label: 'Enable',
        },
        {
          label: 'Delete',
          action(event) {
            console.log('data', data);
            console.log('!# delete', event);
          },
        },
      ],
      buttonsB: [
        {
          action: {
            name: 'launch',
            data: ['missile', {}],
          },
          icon: 'path/to/svg',
          tooltip: 'some text',
        },
      ],
    };
  }),

  // Alternative approach for buttons: instead of `buttonsA` and `buttonsB`, a single `buttons` array and a `belongsTo` key.
  toolbarConfigAltApproach: {
    title: '',
    buttons: [
      {
        action: {
          data: ['args','for', 'some-method'],
          name: 'some-method',
        },
        belongsTo: 'groupA',
        label: 'Enable',
      },
      {
        belongsTo: 'groupA',
        label: 'Delete',
      },
      {
        action: {
          data: ['missile'],
          name: 'launch',
        },
        belongsTo: 'groupB',
        icon: 'path/to/svg',
        tooltip: 'some text',
      }, 
    ],
  },
});

my-toolbar.component.js

import Ember from 'ember';

export default Ember.Component.extend({
});

my-toolbar.template.hbs

<h3>{{toolbar.title}}</h3>

{{#each toolbar.buttonsA as |btn|}}
  <button onclick={{btn.action}}>
  	{{btn.label}}
  </button>
{{/each}}

templates.application.hbs

{{my-toolbar toolbar=toolbarConfig}}

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": true,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
  	"ember-composable-helpers": "2.1.0"
  }
}