simple-stopwatch-bug

components.basic-timer.js

import Ember from 'ember';

export default Ember.Component.extend({
  didInitAttrs() {
    this.set('status', 'inactive');
  },
  startCounting() {
    this.setProperties({status: "running", startDate: new Date()});
    this.updateValue()
  },
  stopCounting() {
    this.setProperties({status: "stopped", stopDate: new Date()});
  },
  reset() {
 		this.setProperties({status: "inactive", startDate: null, stopDate: null, value: null});
	},
  updateValue() {
    this.set('value', Math.abs(new Date() - this.get('startDate')))
    if (this.get('status') === 'running') {
      Ember.run.next(this, this.updateValue) 
    }
  },
  actions: {
    toggle() {
      if (this.get('status') === 'inactive') {
        this.startCounting()
      } else if (this.get('status') === 'running') {
        this.stopCounting()
      } else if (this.get('status') === 'stopped') {
       this.reset() 
      }
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'Ember Twiddle',
 	asyncWithRunLater() {
 		Ember.run.later(function(){
      console.log('yay!');
    }, 5000) 
  },
  
 	asyncWithsetTimeout() {
 		window.setTimeout(function(){
      console.log('yay!');
    }, 5000) 
  },
  
  actions: {
    wut() {
      this.asyncWithRunLater();
    },
    fine() {
      this.asyncWithsetTimeout();
    }
	}
  
});

templates.application.hbs

Toggle first then press buttons<br/><br/>

{{ basic-timer }}

<hr/>

Ember.run.later five second wait<br/>
<button {{ action "wut" }}>bug</button>
<br/><br/>

setTimeout five second wait<br/>
<button {{ action "fine" }}>fine</button>

templates.components.basic-timer.hbs

value: {{ value }}<br/>

status: {{ status }}<br/>

<br/><a href="#" {{ action "toggle" on="click" }}>Toggle
</a>

twiddle.json

{
  "version": "0.4.8",
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.0.0/ember.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.0.0/ember-template-compiler.js"
  }
}