Ember Debounced Input

debounced-input.js

// 
// To be used like this:
// 
//
// {{debounced-input
//   placeholder="1000000"
//   value=propertyName
//   debounceWait=300 <-- debounce wait value
//   fireAtStart=false <-- corresponds to Ember.run.debounce’s 4th param, if false, will run at the end of wait period
//   class="form-control" <-- all regular text input attributes work
//   name="price" 
// }}
import Ember from 'ember';

export default Ember.TextField.extend({
  debounceWait: 500,
  fireAtStart: true,
  _elementValueDidChange: function() {
    Ember.run.debounce(this, this._setValue, this.debounceWait, this.fireAtStart);
  },
  _setValue: function () {
    this.set('value', this.$().val());
  }
});

Where might you place this in the ember-cli hierarchy?

@mitchmahan for me it lives inside app/components/debounced-input.js and can be then used in templates without need to require it

Where does the _elementValueDidChange method come from? I can't find it anywhere in the guides for TextField or TextSupportMixin or Component

@timmyomahony Was curious too, spotted here: https://github.com/emberjs/ember.js/blob/v2.6.1/packages/ember-views/lib/mixins/text_support.js#L198 Makes me nervous to overwrite as it's most likely private...