ember-input-tag

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  number1: 0,
  number2: 0,
  actions: {
     updateName1(nameField) {
       // nameField is a reference to the input-field
       // the inptut value is in target.value
       this.set('name1', nameField.target.value);
     },
     updateName2(name) {
       // name is now the input value 
       this.set('name2', name);
     },
     updateNumber1(number) {
      number = number.replace(/[^0-9]/g, '*');
      this.set('number1', number);
    },   
    updateNumber2(numberField) {
      let number = numberField.target.value;
      number = number.replace(/[^0-9]+/g, '');
      this.set('number2', number);
      // manually update input value, because
      // number property is not change and hence
      // will not trigger a new update
      $(numberField.target).val(number);
    }
  }
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

section {
  border: 2px solid #ccc;
  margin: 2em;
  padding: 1em;
  min-width: 300px;
}

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>


<section>
  <p>Simple two-way binding with ember-input-helper</p>
  <p>Result: {{name0}}</p>
  {{input value=name0}}
</section>


<section>
  <p>Native input-tag</p>
  <p>Result: {{name1}}</p>
  <input value={{name1}} oninput={{action 'updateName1'}}>
</section>

<section>
  <p>Native input-tag with target.value property</p>
  <p>Result: {{name2}}</p>
  <input value={{name2}} oninput={{action 'updateName2' value='target.value'}}>
</section>

<section>
  <p>Native input-tag with mut</p>
  <p>Result: {{name3}}</p>
  <input value={{name3}} oninput={{action (mut name3) value='target.value'}}>
</section>

<section>
  <p>Replace non numbers by *</p>
  <p>Result: {{number1}}</p>
  <input value={{number1}} oninput={{action 'updateNumber1' value='target.value'}}>
</section>

<section>
<p>Allow only numbers</p>
<p>Result: {{number2}}</p>
<input value={{number2}} oninput={{action 'updateNumber2'}}>
</section>
<br>
<br>

twiddle.json

{
  "version": "0.10.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.6.0",
    "ember-data": "2.6.1",
    "ember-template-compiler": "2.6.0"
  },
  "addons": {
   "ember-one-way-controls": "0.8.3"
}
}