New Twiddle

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

my-bandz.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  didInsertElement: function() {
    Object.values(this.bands).forEach(color => {
    	const band = document.createElement('div')
      band.style.background = color;
      // extra shit that should be CSS but Twiddle is annoying
      band.style.width = '100vw';
      band.style.height = '20px';
      this.element.appendChild(band);
    })
    console.log(this.bands);
  }
});

my-bandz.template.hbs

{{yield}}

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
{{#my-bandz
	bands=(hash
  	band1='red'
    band2='blue'
    band3='purple'
  )}}
{{/my-bandz}}

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "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-data": "3.4.2"
  }
}