Skip to content

Instantly share code, notes, and snippets.

@bgentry
Forked from rwjblue/components.one-way-input.js
Last active January 2, 2017 04:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bgentry/21941c09a4bb7ac7e8c03f174208806b to your computer and use it in GitHub Desktop.
Save bgentry/21941c09a4bb7ac7e8c03f174208806b to your computer and use it in GitHub Desktop.
One Way Input with logging
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 10;
},
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": "release",
"ember-template-compiler": "release"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment