New Twiddle

components.yarg-barg-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  taggyName: 'h1',  
  value: 'the value',
  theInput: Ember.computed('value', 'taggyName', function() {
    const tagName = this.get('taggyName');
  	return Ember.String.htmlSafe(`<${this.get('taggyName')} class="jazz" contenteditable="true">${this.get('value')}</${this.get('taggyName')}>`);
  }),
  
  didInsertElement() {
  	this.$('.jazz')[0].addEventListener('keyup', event => {
    	this.send('onChange', event);
    });
  },
  
  actions: {
		onChange(event) {
			console.log(event.target.textContent);
		},
    changeValue(value) {
    	this.set('value', value);
    }
	}
});

/*
Plusses:
Only one tag needed!
Can still register events and load in values!

Minuses:
Re-injects DOM every time you change its dependent values.
Click the button -- after that -- editing the text doesn't trigger the onChange.
You'd need an observer to do so... which is hacky and baaaad.
Where you can enumerate all the possibilities, maybe best to just use those.

Unless there's a way to register events each time...
Nah. Let's move forward!
*/

controllers.application.js

import Ember from 'ember';

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

templates.application.hbs

{{yarg-barg-component}}

templates.components.yarg-barg-component.hbs

<label>
	Enter a value:
	{{theInput}}
</label>
<button {{action "changeValue" "Deeferent"}}>Change value</button>

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}