New Twiddle

components.foo-bar.component.js

export default Ember.Component.extend({
  unicorn: "default",
  click: function() {
    const strngs = ['i', 'want', 'to', 'go', 'home'];
    this.attrs.unicorn.update(
      strngs[Math.floor(Math.random()*strngs.length)]
    );
  }
});

components.foo-bar.template.hbs

<h4>Component Value:</h4>
Unicorn: {{unicorn}}<br>

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'Ember Twiddle',
  
  narwhal: "controller"
});

router.js

import Ember from 'ember';
var Router = Ember.Router.extend({
  location: 'none'
});

Router.map(function() {
});

export default Router;

styles.app.css

body { margin: 12px 16px }

templates.application.hbs

<div style="font-family: Arial">
<h2>Click on the words</h2>

<h4>Controller Values:</h4>
Narwhal: {{narwhal}}


{{foo-bar unicorn=(mut narwhal)}}
</div>