One Way Input

components.one-way-input.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'input',
  attributeBindings: [ 'type', 'value', 'placeholder', 'data-stripe', 'name' ],
  type: 'text',
  _sanitizedValue: undefined,

  input() { this._handleChangeEvent(); },
  change() { this._handleChangeEvent(); },
  
  _handleChangeEvent() {
    let value = this.readDOMAttr('value');
    this._processNewValue.call(this, value);
  },

  _processNewValue(rawValue) {
    let value = this.sanitizeInput(rawValue);

    if (this._sanitizedValue !== value) {
      this._sanitizedValue = value;
      this.attrs.update(value);
    }
  },

  sanitizeInput: function(input) {
    return input;
  },

  didReceiveAttrs: function() {
    if (!this.attrs.update) {
      throw new Error(`You must provide an \`update\` action to \`{{${this.templateName}}}\`.`);
    }

    this._processNewValue.call(this, this.get('value'));
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
    emitCreate(a) {alert(a)},
    onEscape() {alert(1)}
  }
});

templates.application.hbs

<h1>Welcome!</h1>

{{title}}
    {{one-way-input title
        class="st-input st-size-normal new-unit__lesson-title"
        keyEvents=(hash 13=(action 'emitCreate'))
        update=(action (mut title))}}

twiddle.json

{
  "version": "0.4.8",
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "1.13.13",
    "ember-template-compiler": "1.13.13",
    "ember-data": "2.9.0"
  },
  "addons": {
    "ember-hash-helper-polyfill": "0.1.1",
    "ember-one-way-controls": "1.1.1"
  }
}