Input tests

application.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
	newName: 'Input Tests',
	actions: {
		updateName(name) {
			this.set('newName', name);
		}
	}
});

application.template.hbs

<h1>{{newName}}</h1>
<p style="border: 1px dashed red;">
	Input helper with input action:
	{{input type="text" value=newName input="updateName"}}
  <br>
  Throws: <pre style="color: red;">Uncaught TypeError: method.apply is not a function</pre>
</p>
<p style="border: 1px dashed red;">
	Input helper with verbose input action:
	{{input type="text" value=newName action="updateName" on="input"}}
  <br>
  Throws: <pre style="color: red;">Uncaught TypeError: method.apply is not a function</pre>
</p>
<p>
	Input helper with key-up action:
	{{input type="text" value=newName key-up="updateName"}}
  <br>
  Works fine.
</p>
<p>
	HTML Input with HTML handler:
	<input type="text" value={{newName}} onInput={{action "updateName" value="target.value"}} />
  <br>
  Works fine.
</p>
<h2>SideNote:</h2>
<p>This version didn't work at all (just blanks the fields) but it was unclear why since <a href="https://guides.emberjs.com/v2.4.0/templates/actions/#toc_specifying-the-type-of-event" _target="blank">this example</a> makes it seem like it should. The problem has to do with the fact that this version does not pass an argument to the <code>updateName</code> function.</p>
<p>
	HTML Input with action handler:
	<input type="text" value={{newName}} {{action "updateName" value="target.value" on="input"}} />
</p>

twiddle.json

{
  "version": "0.6.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "release",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.3.3/ember-data.js",
    "ember-template-compiler": "release"
  }
}