Skip to content

Instantly share code, notes, and snippets.

@rwjblue
Last active May 8, 2021 14:15
Show Gist options
  • Save rwjblue/2d7246875098d0dbb4a4 to your computer and use it in GitHub Desktop.
Save rwjblue/2d7246875098d0dbb4a4 to your computer and use it in GitHub Desktop.
One Way Input
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'));
}
});
<h1>Welcome!</h1>
{{currentValue}}
<br>
{{one-way-input
value=currentValue
update=(action (mut currentValue))
}}
{{outlet}}
{
"version": "0.4.8",
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
"ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.0.0/ember.js",
"ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.0.0/ember-template-compiler.js"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment