Tick

application.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'Ember Twiddle',

  timers: null,

  // contrived examples are contrived, I used `init` because I know what I'm doing
  initTimers: Ember.on('init', function() {
    this.set('timers', [
      Ember.Object.create({ time: 0, ticking: true}),
      Ember.Object.create({ time: 0, ticking: true})]);

    this.tick();
  }),

  tick: function() {
    this.get('timers').forEach(timer => {
      if (timer.get('ticking')) {
        timer.set('time', timer.get('time') + 1);
      }
    });

    Ember.run.later(this, this.tick, 1000);
  },

  actions: {
    stopTimer(index) {
      this.get('timers').objectAt(index).set('ticking', false);
    },
    startTimer(index) {
      this.get('timers').objectAt(index).set('ticking', true);
    }
  }
});

application.template.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
{{#each timers as |timer index|}}
  {{timer-component timer=timer stop=(action 'stopTimer' index) start=(action 'startTimer' index)}}
{{/each}}
<br>
<br>

timer-component.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    stop() {
      this.get('stop')();
    },
    start() {
      this.get('start')();
    }
  }
});

timer-component.template.hbs

<p>{{timer.time}}</p>
<button {{action 'stop'}}>Stop</button>
<button {{action 'start'}}>Start</button>

twiddle.json

{
  "version": "0.4.14",
  "EmberENV": {
    "FEATURES": {}
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.1.0/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.1.0/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.1.0/ember-template-compiler.js"
  }
}