New Twiddle

components.counter-thingy.js

export default Ember.Component.extend({
  interval: 1000,
  timer: null,
  startTimer() {
    const timer = Ember.run.later(this, () => {
      this.sendAction('tick');
      this.startTimer();
    }, this.get('interval'));
    this.set('timer', timer);
  },
  cancelTimer() {
    Ember.run.cancel(this.get('timer'));
  },
  didInsertElement() {
    this.startTimer();
  },
  actions: {
    start() {
      this.startTimer();
    },
    cancel() {
      this.cancelTimer();
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'Ember Twiddle',
  count: 0,
  actions: {
    countIt() {
      this.incrementProperty('count');
    }
  }
});

templates.application.hbs

{{count}}
{{counter-thingy tick="countIt"}}

templates.components.counter-thingy.hbs

<button {{action 'cancel'}}>Stop counting</button>