rm-components/addon/components/rm-incrementor/component.js

The default blueprint for ember-cli addons.

import Ember from 'ember';
import layout from './template';

const {
  Component
} = Ember;

/**
 * rm-incrementor/component is some basic metal to have an Integer
 * that can be incremented/decremented from ui.
 *
 * Attach action:increment and action:decrement to ui element
 *
 * Pass in {{total}} as the integer
 * @class rm-incrementor/component
 * @public
 */
export default Component.extend({
  layout,

  /**
   * Determine if loose input string is numeric
   * The implementation reasoning (http://stackoverflow.com/a/6449623/1181172)
   *
   * @method  _isNumber
   * @param  {string} n   Random string input
   * @return {boolean}    Input is numeric?
   * @private
   */
  _isNumber(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
  },
  /**
   * Display only version of @total, to protect
   * against mutation and skirt around having to use
   * an observer
   *
   * @method displayTotal
   * @return {string}
   * @public
   */
  displayTotal: Ember.computed('total', function() {
    return this.get('total');
  }),

  actions: {
    /**
     * Simply increment the value of @total
     * TODO: Eventually we need to inforce a max
     *
     * @method actions.increment
     * @public
     */
    increment() {
      const total = this.get('total');
      this.set('total', total + 1);
    },

    /**
     * Simply decrement the value of @total
     * Disable it from going below 0
     *
     * @method actions.decrement
     * @public
     */
    decrement() {
      const total = this.get('total');
      if (total > 0) {
        this.set('total', total - 1);
      }
    },

    /**
     * Update @total based on `<input>` from compoenent template
     * After running through validation to ensure numericality.
     *
     * If not numeric, just floors out to 0.
     *
     * If a floating point, just ciel's it.
     *
     * @method actions.updateTotal
     * @public
     */
    updateTotal() {
      const total = this.$('input').val();
      if (total < 0 ||
          !this._isNumber(total)) {
        this.set('total', 0);
      } else {
        this.set('total', Math.ceil(total));
      }
    }
  }
});