Ember: Dynamically create/update props using only handlebar helpers

application.hbs

{{!--

  Notice the onchange event binding
    1. the get helper grabs the prop to change
    2. the mut helper provides an interface to update that prop
    3. the action helper packages up that interface into a callable function, which will update the prop
    4. the callable function is invoked when the input changes and is passed the input's current value as the first argument, which is then used to set the prop
      a. we obtain the input's current value by destructing the native Event object which is passed as an argument to the action helper, value="currentTarget.value" basically means Event.currentTarget.value

--}}

<div>
  {{#each-in model as |key|}}
    <input 
      type="number"
      value={{get currentValues key}}
      onchange={{action (mut (get currentValues key)) value="currentTarget.value"}}>
  {{/each-in}}
</div>

application.js

import Ember from 'ember';

const {
  Route
} = Ember;

export default Route.extend({
  model() {
    return {
      foo: 1,
      bar: 2,
      baz: 3
    }
  }
});

index.js

import Ember from 'ember';

const {
  Controller
} = Ember;

export default Controller.extend({
  currentValues: Ember.Object.create({})
});